New UI for drive, with eslint and type errors ignored during build

.github/workflows/ci.yaml

@@ -0,0 +1,23 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install Dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Copy .env.example files
+        shell: bash
+        run: find . -type f -name ".env.example" -exec sh -c 'cp "$1" "${1%.*}"' _ {} \;
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+      - name: Lint
+        run: pnpm lint

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils",
+    "ui": "~/components/ui",
+    "lib": "~/lib",
+    "hooks": "~/hooks"
+  },
+  "registries": {}
+}

next.config.js

@@ -5,6 +5,14 @@
 import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
-const config = {};
+const config = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
 
 export default config;

package.json

@@ -21,11 +21,16 @@
   },
   "dependencies": {
     "@libsql/client": "^0.14.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@t3-oss/env-nextjs": "^0.12.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "drizzle-orm": "^0.41.0",
+    "lucide-react": "^0.543.0",
     "next": "^15.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.3.1",
     "zod": "^3.24.2"
   },
   "devDependencies": {
@@ -42,6 +47,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.0.15",
+    "tw-animate-css": "^1.3.8",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.27.0"
   },

src/app/page.tsx

@@ -1,9 +1,110 @@
-import Link from "next/link";
+"use client"
+
+import { useState } from "react"
+import { mockFiles } from "../lib/mock-data"
+import { Folder, FileIcon, Upload, ChevronRight } from "lucide-react"
+import Link from "next/link"
+import { Button } from "~/components/ui/button"
+
+export default function GoogleDriveClone() {
+  const [currentFolder, setCurrentFolder] = useState<string | null>(null)
+
+  const getCurrentFiles = () => {
+    return mockFiles.filter((file) => file.parent === currentFolder)
+  }
+
+  const handleFolderClick = (folderId: string) => {
+    setCurrentFolder(folderId)
+  }
+
+  const getBreadcrumbs = () => {
+    const breadcrumbs = []
+    let currentId = currentFolder
+
+    while (currentId !== null) {
+      const folder = mockFiles.find((file) => file.id === currentId)
+      if (folder) {
+        breadcrumbs.unshift(folder)
+        currentId = folder.parent
+      } else {
+        break
+      }
+    }
+
+    return breadcrumbs
+  }
+
+  const handleUpload = () => {
+    alert("Upload functionality would be implemented here")
+  }
 
-export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      {"drive incoming"}
-    </main>
-  );
+    <div className="min-h-screen bg-gray-900 text-gray-100 p-8">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center">
+            <Button
+              onClick={() => setCurrentFolder(null)}
+              variant="ghost"
+              className="text-gray-300 hover:text-white mr-2"
+            >
+              My Drive
+            </Button>
+            {getBreadcrumbs().map((folder, index) => (
+              <div key={folder.id} className="flex items-center">
+                <ChevronRight className="mx-2 text-gray-500" size={16} />
+                <Button
+                  onClick={() => handleFolderClick(folder.id)}
+                  variant="ghost"
+                  className="text-gray-300 hover:text-white"
+                >
+                  {folder.name}
+                </Button>
+              </div>
+            ))}
+          </div>
+          <Button onClick={handleUpload} className="bg-blue-600 text-white hover:bg-blue-700">
+            <Upload className="mr-2" size={20} />
+            Upload
+          </Button>
+        </div>
+        <div className="bg-gray-800 rounded-lg shadow-xl">
+          <div className="px-6 py-4 border-b border-gray-700">
+            <div className="grid grid-cols-12 gap-4 text-sm font-medium text-gray-400">
+              <div className="col-span-6">Name</div>
+              <div className="col-span-3">Type</div>
+              <div className="col-span-3">Size</div>
+            </div>
+          </div>
+          <ul>
+            {getCurrentFiles().map((file) => (
+              <li key={file.id} className="px-6 py-4 border-b border-gray-700 hover:bg-gray-750">
+                <div className="grid grid-cols-12 gap-4 items-center">
+                  <div className="col-span-6 flex items-center">
+                    {file.type === "folder" ? (
+                      <button
+                        onClick={() => handleFolderClick(file.id)}
+                        className="flex items-center text-gray-100 hover:text-blue-400"
+                      >
+                        <Folder className="mr-3" size={20} />
+                        {file.name}
+                      </button>
+                    ) : (
+                      <Link href={file.url ?? "#"} className="flex items-center text-gray-100 hover:text-blue-400">
+                        <FileIcon className="mr-3" size={20} />
+                        {file.name}
+                      </Link>
+                    )}
+                  </div>
+                  <div className="col-span-3 text-gray-400">{file.type === "folder" ? "Folder" : "File"}</div>
+                  <div className="col-span-3 text-gray-400">{file.type === "folder" ? "--" : "2 MB"}</div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
 }
+