Add src/app/manage-menu/page.tsx

src/app/manage-menu/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { Plus, Trash2, Edit2, Check } from "lucide-react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function ManageMenuPage() {
+  const [menuItems, setMenuItems] = useState([
+    { id: "1", name: "Margherita Pizza", price: "15.00" },
+    { id: "2", name: "Classic Burger", price: "12.00" },
+  ]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editPrice, setEditPrice] = useState("");
+
+  const addItem = () => {
+    const newItem = { id: Date.now().toString(), name: "New Item", price: "0.00" };
+    setMenuItems([...menuItems, newItem]);
+  };
+
+  const deleteItem = (id: string) => {
+    setMenuItems(menuItems.filter(item => item.id !== id));
+  };
+
+  const startEdit = (item: { id: string, name: string, price: string }) => {
+    setEditingId(item.id);
+    setEditName(item.name);
+    setEditPrice(item.price);
+  };
+
+  const saveEdit = (id: string) => {
+    setMenuItems(menuItems.map(item => item.id === id ? { ...item, name: editName, price: editPrice } : item));
+    setEditingId(null);
+  };
+
+  return (
+    <ThemeProvider>
+      <NavbarStyleFullscreen
+        navItems={[{ name: "Home", id: "/" }, { name: "Menu Management", id: "/manage-menu" }]}
+        brandName="FoodMarket"
+      />
+      <main className="pt-32 pb-16 px-6 max-w-4xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold">Menu Management</h1>
+          <button onClick={addItem} className="flex items-center gap-2 bg-primary px-4 py-2 rounded-full text-white">
+            <Plus size={18} /> Add Item
+          </button>
+        </div>
+        <div className="space-y-4">
+          {menuItems.map(item => (
+            <div key={item.id} className="flex items-center gap-4 bg-card p-4 rounded-xl border">
+              {editingId === item.id ? (
+                <>
+                  <input value={editName} onChange={e => setEditName(e.target.value)} className="flex-1 p-2 border rounded" />
+                  <input value={editPrice} onChange={e => setEditPrice(e.target.value)} className="w-24 p-2 border rounded" />
+                  <button onClick={() => saveEdit(item.id)} className="p-2 text-green-500"><Check /></button>
+                </>
+              ) : (
+                <>
+                  <span className="flex-1 font-medium">{item.name}</span>
+                  <span className="font-bold">${item.price}</span>
+                  <button onClick={() => startEdit(item)} className="p-2 text-blue-500"><Edit2 size={18} /></button>
+                  <button onClick={() => deleteItem(item.id)} className="p-2 text-red-500"><Trash2 size={18} /></button>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}