twotalesanimation
34 lines
964 B
TypeScript
34 lines
964 B
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
export const HIDE_ARCHIVED_KEY = "app:hideArchivedProjects";
|
|
|
|
export function HideArchivedToggle() {
|
|
const [checked, setChecked] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setChecked(localStorage.getItem(HIDE_ARCHIVED_KEY) === "1");
|
|
}, []);
|
|
|
|
const toggle = (val: boolean) => {
|
|
setChecked(val);
|
|
localStorage.setItem(HIDE_ARCHIVED_KEY, val ? "1" : "0");
|
|
};
|
|
|
|
return (
|
|
<label className="flex items-center gap-3 cursor-pointer select-none">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e) => toggle(e.target.checked)}
|
|
className="cursor-pointer accent-blue-500 w-4 h-4 shrink-0"
|
|
/>
|
|
<div>
|
|
<p className="text-sm font-medium text-zinc-200">Hide archived productions</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">Archived projects won't appear on the Projects page</p>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|