Browse Source

feat(files): create file management page with upload functionality

vtugulan 6 tháng trước cách đây
mục cha
commit
cc7290c697
2 tập tin đã thay đổi với 60 bổ sung2 xóa
  1. 47 0
      app/files/page.tsx
  2. 13 2
      app/page.tsx

+ 47 - 0
app/files/page.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { UploadForm } from "../components/uploadForm";
+
+export default function FilesPage() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/vtorio.svg"
+          alt="Vtor.io logo"
+          width={180}
+          height={38}
+          priority
+        />
+        
+        <h1 className="text-3xl font-bold text-center sm:text-left">
+          File Management
+        </h1>
+        
+        <p className="text-sm text-center sm:text-left max-w-[600px]">
+          Upload and manage your media files here. Select files to upload them to the server.
+        </p>
+
+        <div className="flex flex-col gap-4 items-center sm:items-start">
+          <h2 className="text-xl font-semibold">Upload Files</h2>
+          <UploadForm />
+        </div>
+        
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="/"
+          >
+            Back to Home
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="/api-docs"
+          >
+            API Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}

+ 13 - 2
app/page.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { UploadForm } from "./components/uploadForm";
 
 export default function Home() {
   return (
@@ -53,7 +52,19 @@ export default function Home() {
             />
             API Documentation
           </a>
-          <UploadForm />
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="/files"
+          >
+            <Image
+              className="dark:invert"
+              src="/file.svg"
+              alt="Files icon"
+              width={20}
+              height={20}
+            />
+            Upload Files
+          </a>
         </div>
       </main>
     </div>