External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-18 07:56:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edit Mode toggle

Browse Source
This commit is contained in:
headlesdev 2025-05-18 15:14:08 +02:00
parent 3c4a8d3238
commit eba205497d
2 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/dashboard/sites/[siteId]/SitePage.tsx
View File

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

26
components/EditModeToggle.tsx Normal file
View File

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