76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { ShieldAlert } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SidebarMaintenanceControlProps = {
|
|
action: (formData: FormData) => Promise<void>;
|
|
initialEnabled: boolean;
|
|
label: string;
|
|
onLabel: string;
|
|
offLabel: string;
|
|
};
|
|
|
|
export function SidebarMaintenanceControl({
|
|
action,
|
|
initialEnabled,
|
|
label,
|
|
onLabel,
|
|
offLabel,
|
|
}: SidebarMaintenanceControlProps) {
|
|
const pathname = usePathname();
|
|
const [enabled, setEnabled] = useState(initialEnabled);
|
|
|
|
return (
|
|
<form id="sidebar-maintenance-form" action={action} className="space-y-2">
|
|
<input type="hidden" name="redirectPath" value={pathname} />
|
|
<input type="hidden" name="enabled" value={enabled ? "true" : "false"} />
|
|
|
|
<label
|
|
htmlFor="sidebar-maintenance-enabled"
|
|
className={cn(
|
|
"flex cursor-pointer items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
|
|
enabled
|
|
? "border-status-warning/40 bg-status-warning-soft/80"
|
|
: "border-input bg-card hover:bg-accent/20",
|
|
)}
|
|
>
|
|
<span className="flex min-w-0 items-center gap-3">
|
|
<span
|
|
className={cn(
|
|
"flex h-9 w-9 items-center justify-center rounded-pill border",
|
|
enabled
|
|
? "border-status-warning/40 bg-status-warning-soft text-status-warning"
|
|
: "border-border bg-background text-muted-foreground",
|
|
)}
|
|
>
|
|
<ShieldAlert className="h-4 w-4" />
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-sm font-medium text-foreground">{label}</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
{enabled ? onLabel : offLabel}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
|
|
<Badge variant={enabled ? "warning" : "success"}>
|
|
{enabled ? "ON" : "OFF"}
|
|
</Badge>
|
|
</label>
|
|
|
|
<Checkbox
|
|
id="sidebar-maintenance-enabled"
|
|
checked={enabled}
|
|
onCheckedChange={(checked) => setEnabled(checked === true)}
|
|
className="sr-only"
|
|
/>
|
|
</form>
|
|
);
|
|
}
|