src/app/admin/page.tsx

@@ -5,7 +5,25 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 
 export default function AdminPage() {
-  const [templates, setTemplates] = useState([]);
+  const [password, setPassword] = useState("");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [templates, setTemplates] = useState<any[]>([]);
+
+  const handleLogin = () => {
+    if (password === "Arshia@41010") {
+      setIsAuthenticated(true);
+    } else {
+      alert("Invalid password");
+    }
+  };
+
+  const addTemplate = () => {
+    setTemplates([...templates, { id: Date.now().toString(), name: "", description: "", price: "", free: false, image: "" }]);
+  };
+
+  const updateTemplate = (id: string, field: string, value: any) => {
+    setTemplates(templates.map(t => t.id === id ? { ...t, [field]: value } : t));
+  };
 
   return (
     <ThemeProvider
@@ -31,22 +49,30 @@ export default function AdminPage() {
         brandName="BrightBytee Studios"
       />
       <main className="pt-32 pb-20 px-6 container mx-auto">
-        <h1 className="text-4xl font-bold mb-8">Admin Dashboard</h1>
-        <div className="bg-white/10 p-8 rounded-2xl backdrop-blur-md">
-          <h2 className="text-2xl font-semibold mb-6">Template Management</h2>
-          <div className="border-2 border-dashed border-white/20 p-12 text-center rounded-xl">
-             <p className="mb-4">Upload new templates for the storefront.</p>
-             <button className="bg-primary text-white px-6 py-2 rounded-full">Choose Files</button>
-          </div>
-          <div className="mt-8">
-            <h3 className="text-xl mb-4">Current Templates</h3>
-            {templates.length === 0 ? (
-              <p className="text-sm opacity-70">No templates uploaded yet.</p>
-            ) : (
-              <div>{/* Template list logic */}</div>
-            )}
-          </div>
-        </div>
+        {!isAuthenticated ? (
+            <div className="max-w-md mx-auto bg-white/10 p-8 rounded-2xl backdrop-blur-md">
+                <h1 className="text-2xl mb-4">Admin Access</h1>
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full p-2 mb-4 rounded bg-white/5" placeholder="Password" />
+                <button onClick={handleLogin} className="w-full bg-primary text-white p-2 rounded">Login</button>
+            </div>
+        ) : (
+            <div className="bg-white/10 p-8 rounded-2xl backdrop-blur-md">
+                <div className="flex justify-between items-center mb-6">
+                    <h1 className="text-4xl font-bold">Admin Dashboard</h1>
+                    <button onClick={addTemplate} className="bg-primary text-white px-6 py-2 rounded-full">+ Add Template</button>
+                </div>
+                <div className="grid gap-6">
+                    {templates.map((t) => (
+                        <div key={t.id} className="p-4 border rounded-xl flex gap-4 items-center">
+                            <input placeholder="Title" value={t.name} onChange={(e) => updateTemplate(t.id, 'name', e.target.value)} className="bg-transparent border p-1 rounded" />
+                            <input placeholder="Description" value={t.description} onChange={(e) => updateTemplate(t.id, 'description', e.target.value)} className="bg-transparent border p-1 rounded" />
+                            <input placeholder="Price" disabled={t.free} value={t.price} onChange={(e) => updateTemplate(t.id, 'price', e.target.value)} className="bg-transparent border p-1 rounded w-20" />
+                            <label className="flex items-center gap-2"><input type="checkbox" checked={t.free} onChange={(e) => updateTemplate(t.id, 'free', e.target.checked)} /> Free</label>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )}
       </main>
     </ThemeProvider>
   );