Edit Mode toggle

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -1,38 +1,50 @@
 "use client"
-import Sidebar from "@/components/Sidebar";
-import useSite from "@/hooks/useSite";
-import { useEffect } from "react";
+import Sidebar from "@/components/Sidebar"
+import useSite from "@/hooks/useSite"
+import { useEffect, useState } from "react"
+import { EditModeToggle } from "@/components/EditModeToggle"
 
 interface SitesPageProps {
-    username: string;
-    name: string;
-    siteId: string;
+  username: string
+  name: string
+  siteId: string
 }
 
 export default function SitesPage({ username, name, siteId }: SitesPageProps) {
-    const { site, loadSite, setSiteId } = useSite();
-    useEffect(() => {
-        console.log(siteId);
-        if (siteId) {
-            setSiteId(siteId);
-        }
-    }, [siteId, setSiteId]);
-    return (
-        <Sidebar 
-            username={username} 
-            fullName={name} 
-            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites', siteId]}
-        >
-            <main>
-                <div className="flex gap-4 items-center">
-                    <div className="flex-1">
-                        <h1 className="text-2xl font-bold">Site - {site.name}</h1>
-                        <p className="text-sm opacity-70">
-                            Description: {site.description}
-                        </p>
+  const { site, loadSite, setSiteId } = useSite()
+  const [isEditMode, setIsEditMode] = useState(false)
+
+  useEffect(() => {
+    if (siteId) {
+      setSiteId(siteId)
+    }
+  }, [siteId, setSiteId])
+
+  return (
+    <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Ressources", "Sites", site.name]}>
+      <main>
+        <div className="flex flex-col gap-4">
+          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
+            <div className="flex-1">
+                <div className="w-full flex justify-between items-center">
+                    <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
+                    <div className="w-1/2 flex justify-end">
+                        <EditModeToggle onToggle={setIsEditMode} />
                     </div>
                 </div>
-            </main>
-        </Sidebar>
-    )
-}
+              <p className="text-sm opacity-70">Description: {site.description || "No description"}</p>
+            </div>
+          </div>
+          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold">Networks</h1>
+              <p className="text-sm opacity-70">
+                {site.networks?.length > 0 ? site.networks.join(", ") : "No networks"}
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </Sidebar>
+  )
+}

components/EditModeToggle.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { useState } from "react"
+import { Pencil, Eye } from "lucide-react"
+
+interface EditModeToggleProps {
+  className?: string
+  onToggle?: (isEditMode: boolean) => void
+}
+
+export function EditModeToggle({ className, onToggle }: EditModeToggleProps) {
+  const [isEditMode, setIsEditMode] = useState(false)
+
+  const handleToggle = () => {
+    const newMode = !isEditMode
+    setIsEditMode(newMode)
+    onToggle?.(newMode)
+  }
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <input type="checkbox" onChange={handleToggle} checked={isEditMode} className="toggle toggle-xs" />
+      <label htmlFor="toggle" className="label-text">Edit Mode</label>
+    </div>
+  )
+}