Edit Mode toggle

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>
+  )
+}