Improve admin save UX and portfolio navigation

2026-03-07 19:20:58 +01:00
parent 3d1976a7a5
commit ee21e8b823
19 changed files with 652 additions and 424 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import { ShieldAlert } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+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-border bg-surface-1 hover:bg-surface-2",
+        )}
+      >
+        <span className="flex min-w-0 items-center gap-3">
+          <span
+            className={cn(
+              "flex h-9 w-9 items-center justify-center rounded-full 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>
+
+      <input
+        id="sidebar-maintenance-enabled"
+        type="checkbox"
+        checked={enabled}
+        onChange={(event) => setEnabled(event.target.checked)}
+        className="sr-only"
+      />
+    </form>
+  );
+}