117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { ShieldAlert } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { useRef, useState } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
|
|
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;
|
|
};
|
|
|
|
type SidebarMaintenanceFieldProps = Omit<
|
|
SidebarMaintenanceControlProps,
|
|
"action" | "initialEnabled"
|
|
> & {
|
|
enabled: boolean;
|
|
onToggle: (checked: boolean) => void;
|
|
};
|
|
|
|
function SidebarMaintenanceField({
|
|
enabled,
|
|
label,
|
|
onToggle,
|
|
}: SidebarMaintenanceFieldProps) {
|
|
const { pending } = useFormStatus();
|
|
|
|
return (
|
|
<>
|
|
<label
|
|
htmlFor="sidebar-maintenance-enabled"
|
|
aria-disabled={pending}
|
|
className={cn(
|
|
"flex items-center justify-between gap-3 rounded-nested border px-3 py-2 transition-colors",
|
|
pending && "cursor-wait opacity-70",
|
|
!pending && "cursor-pointer",
|
|
enabled
|
|
? "border-status-warning/40 bg-status-warning-soft/80"
|
|
: "border-status-success/30 bg-status-success-soft/80 hover:bg-status-success-soft",
|
|
)}
|
|
>
|
|
<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-status-success/30 bg-status-success-soft text-status-success",
|
|
)}
|
|
>
|
|
<ShieldAlert className="h-4 w-4" />
|
|
</span>
|
|
<span className="min-w-0 text-sm font-medium text-foreground">{label}</span>
|
|
</span>
|
|
|
|
<Badge variant={enabled ? "warning" : "success"}>
|
|
{enabled ? "OFFLINE" : "LIVE"}
|
|
</Badge>
|
|
</label>
|
|
|
|
<Checkbox
|
|
id="sidebar-maintenance-enabled"
|
|
checked={enabled}
|
|
checkedValue="true"
|
|
uncheckedValue="false"
|
|
disabled={pending}
|
|
onCheckedChange={(checked) => onToggle(checked === true)}
|
|
className="sr-only"
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function SidebarMaintenanceControl({
|
|
action,
|
|
initialEnabled,
|
|
label,
|
|
}: SidebarMaintenanceControlProps) {
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
const enabledInputRef = useRef<HTMLInputElement>(null);
|
|
const pathname = usePathname();
|
|
const [enabled, setEnabled] = useState(initialEnabled);
|
|
|
|
return (
|
|
<form
|
|
id="sidebar-maintenance-form"
|
|
ref={formRef}
|
|
action={action}
|
|
className="space-y-2"
|
|
>
|
|
<input type="hidden" name="redirectPath" value={pathname} />
|
|
<input
|
|
ref={enabledInputRef}
|
|
type="hidden"
|
|
name="enabled"
|
|
value={enabled ? "true" : "false"}
|
|
/>
|
|
<SidebarMaintenanceField
|
|
enabled={enabled}
|
|
label={label}
|
|
onToggle={(checked) => {
|
|
setEnabled(checked);
|
|
if (enabledInputRef.current) {
|
|
enabledInputRef.current.value = checked ? "true" : "false";
|
|
}
|
|
formRef.current?.requestSubmit();
|
|
}}
|
|
/>
|
|
</form>
|
|
);
|
|
}
|