Extract File Fow Components

Author: ThomasCode92

src/app/file-row.tsx

@@ -0,0 +1,57 @@
+import { FileIcon, Folder as FolderIcon } from "lucide-react";
+
+import type { File, Folder } from "~/lib/mock-data";
+
+export function FileRow(props: { file: File }) {
+  const { file } = props;
+
+  return (
+    <li
+      key={file.id}
+      className="hover:bg-gray-750 border-b border-gray-700 px-6 py-4"
+    >
+      <div className="grid grid-cols-12 items-center gap-4">
+        <div className="col-span-6 flex items-center">
+          <a
+            href={file.url}
+            className="flex items-center text-gray-100 hover:text-blue-400"
+            target="_blank"
+          >
+            <FileIcon className="mr-3" size={20} />
+            {file.name}
+          </a>
+        </div>
+        <div className="col-span-3 text-gray-400">{"file"}</div>
+        <div className="col-span-3 text-gray-400">{file.size}</div>
+      </div>
+    </li>
+  );
+}
+
+export function FolderRow(props: {
+  folder: Folder;
+  handleFolderClick: () => void;
+}) {
+  const { folder, handleFolderClick } = props;
+
+  return (
+    <li
+      key={folder.id}
+      className="hover:bg-gray-750 border-b border-gray-700 px-6 py-4"
+    >
+      <div className="grid grid-cols-12 items-center gap-4">
+        <div className="col-span-6 flex items-center">
+          <button
+            onClick={handleFolderClick}
+            className="flex items-center text-gray-100 hover:text-blue-400"
+          >
+            <FolderIcon className="mr-3" size={20} />
+            {folder.name}
+          </button>
+        </div>
+        <div className="col-span-3 text-gray-400"></div>
+        <div className="col-span-3 text-gray-400"></div>
+      </div>
+    </li>
+  );
+}

src/app/page.tsx

@@ -5,15 +5,19 @@ import Link from "next/link";
 import { useState } from "react";
 
 import { Button } from "~/components/ui/button";
-import { mockFiles } from "~/lib/mock-data";
+import { mockFiles, mockFolders } from "~/lib/mock-data";
 
 export default function GoogleDriveClone() {
-  const [currentFolder, setCurrentFolder] = useState<string | null>(null);
+  const [currentFolder, setCurrentFolder] = useState("root");
 
   const getCurrentFiles = () => {
     return mockFiles.filter((file) => file.parent === currentFolder);
   };
 
+  const getCurrentFolders = () => {
+    return mockFolders.filter((folder) => folder.parent === currentFolder);
+  };
+
   const handleFolderClick = (folderId: string) => {
     setCurrentFolder(folderId);
   };
@@ -45,7 +49,7 @@ export default function GoogleDriveClone() {
         <div className="mb-6 flex items-center justify-between">
           <div className="flex items-center">
             <Button
-              onClick={() => setCurrentFolder(null)}
+              onClick={() => setCurrentFolder("root")}
               variant="ghost"
               className="mr-2 text-gray-300 hover:text-white"
             >

src/lib/mock-data.ts

@@ -1,22 +1,33 @@
-export interface File {
-  id: string
-  name: string
-  type: "file" | "folder"
-  url?: string
-  parent: string | null
-  size?: string
-}
+export type File = {
+  id: string;
+  name: string;
+  type: "file";
+  url: string;
+  parent: string;
+  size: string;
+};
 
+export type Folder = {
+  id: string;
+  name: string;
+  type: "folder";
+  parent: string | null;
+};
+
+// prettier-ignore
+export const mockFolders: Folder[] = [
+  { id: "root", name: "root", type: "folder", parent: null }, // the root folder
+  { id: "1", name: "Documents", type: "folder", parent: "root" },
+  { id: "2", name: "Images", type: "folder", parent: "root" },
+  { id: "3", name: "Work", type: "folder", parent: "root" },
+  { id: "8", name: "Presentations", type: "folder", parent: "3" },
+];
+
+// prettier-ignore
 export const mockFiles: File[] = [
-  { id: "1", name: "Documents", type: "folder", parent: null },
-  { id: "2", name: "Images", type: "folder", parent: null },
-  { id: "3", name: "Work", type: "folder", parent: null },
-  { id: "4", name: "Resume.pdf", type: "file", url: "/files/resume.pdf", parent: "1", size: "1.2 MB" },
   { id: "5", name: "Project Proposal.docx", type: "file", url: "/files/proposal.docx", parent: "1", size: "2.5 MB" },
   { id: "6", name: "Vacation.jpg", type: "file", url: "/files/vacation.jpg", parent: "2", size: "3.7 MB" },
   { id: "7", name: "Profile Picture.png", type: "file", url: "/files/profile.png", parent: "2", size: "1.8 MB" },
-  { id: "8", name: "Presentations", type: "folder", parent: "3" },
   { id: "9", name: "Q4 Report.pptx", type: "file", url: "/files/q4-report.pptx", parent: "8", size: "5.2 MB" },
   { id: "10", name: "Budget.xlsx", type: "file", url: "/files/budget.xlsx", parent: "3", size: "1.5 MB" },
 ]
-