Fix edit mode toggle

This commit is contained in:
headlesdev 2025-05-20 00:34:55 +02:00
parent ca1d60b058
commit cc59988917
2 changed files with 15 additions and 11 deletions

View File

@ -61,7 +61,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
</button>
</>
)}
<EditModeToggle onToggle={setIsEditMode} />
<EditModeToggle toggle={setIsEditMode} isActive={isEditMode} />
</div>
</div>

View File

@ -1,26 +1,30 @@
"use client"
import { useState } from "react"
import { Pencil, Eye } from "lucide-react"
import { useEffect, useState } from "react"
interface EditModeToggleProps {
className?: string
onToggle?: (isEditMode: boolean) => void
toggle?: (isEditMode: boolean) => void
isActive?: boolean
}
export function EditModeToggle({ className, onToggle }: EditModeToggleProps) {
const [isEditMode, setIsEditMode] = useState(false)
export function EditModeToggle({ className, toggle, isActive }: EditModeToggleProps) {
const [isEditMode, setIsEditMode] = useState(isActive ?? false);
useEffect(() => {
setIsEditMode(isActive ?? false);
}, [isActive]);
const handleToggle = () => {
const newMode = !isEditMode
setIsEditMode(newMode)
onToggle?.(newMode)
}
const newMode = !isEditMode;
setIsEditMode(newMode);
toggle?.(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>
)
);
}