Add src/app/dashboard/page.tsx

2026-05-16 21:47:55 +00:00
parent 135236d88d
commit b9cd0fb577
1 changed files with 71 additions and 0 deletions
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useState } from 'react';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { Upload, Image as ImageIcon, Trash2 } from 'lucide-react';
+
+export default function DashboardPage() {
+  const [images, setImages] = useState<string[]>([]);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files) {
+      const newImages = Array.from(files).map(file => URL.createObjectURL(file));
+      setImages(prev => [...prev, ...newImages]);
+    }
+  };
+
+  const removeImage = (index: number) => {
+    setImages(prev => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <NavbarLayoutFloatingOverlay
+        brandName="SANIS"
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Dashboard", id: "/dashboard" }
+        ]}
+      />
+      <main className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
+        <h1 className="text-4xl font-semibold mb-8">User Dashboard</h1>
+        <div className="bg-white/50 p-8 rounded-xl border border-white/20 shadow-xl">
+          <h2 className="text-2xl mb-6 flex items-center gap-2"><ImageIcon /> Image Management</h2>
+          <div className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center mb-8">
+            <label className="cursor-pointer flex flex-col items-center gap-4">
+              <Upload className="w-10 h-10 text-gray-400" />
+              <span className="text-lg font-medium">Upload New Images</span>
+              <input type="file" multiple accept="image/*" className="hidden" onChange={handleFileUpload} />
+            </label>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {images.map((src, index) => (
+              <div key={index} className="relative group aspect-square rounded-lg overflow-hidden border border-gray-200">
+                <img src={src} alt="uploaded" className="w-full h-full object-cover" />
+                <button 
+                  onClick={() => removeImage(index)} 
+                  className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Trash2 size={16} />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}