1import { type CSSProperties, useState } from "react";
2
3import { cn } from "~/lib/utils";
4
5export function PanelAnimationsPreview({ durationMs }: { durationMs: number }) {
6 const [panelsOpen, setPanelsOpen] = useState(true);
7 const transitionClass =
8 "transition-[width,height,border-width] duration-(--preview-duration) ease-out motion-reduce:transition-none";
9
10 return (
11 <button
12 type="button"
13 aria-label="Replay panel animation preview"
14 className="flex h-10 w-full cursor-pointer overflow-hidden rounded-lg border border-border bg-background p-1 shadow-xs/5 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background"
15 onClick={() => setPanelsOpen((open) => !open)}
16 style={{ "--preview-duration": `${durationMs}ms` } as CSSProperties}
17 >
18 <span
19 aria-hidden
20 className={cn(
21 "h-full shrink-0 overflow-hidden rounded-md bg-sidebar",
22 transitionClass,
23 panelsOpen ? "w-4" : "w-0",
24 )}
25 />
26 <span aria-hidden className="flex min-w-0 flex-1 flex-col px-1">
27 <span className="flex min-h-0 flex-1 flex-col gap-1 pt-1">
28 <span className="h-0.5 w-full rounded-full bg-muted-foreground/25" />
29 <span className="h-0.5 w-4/5 rounded-full bg-muted-foreground/20" />
30 <span className="h-0.5 w-3/5 rounded-full bg-muted-foreground/15" />
31 </span>
32 <span
33 className={cn(
34 "flex shrink-0 items-center overflow-hidden bg-foreground/5 px-2",
35 transitionClass,
36 panelsOpen ? "h-2 border-t border-border/70" : "h-0 border-t-0",
37 )}
38 >
39 <span className="h-px w-2/3 rounded-full bg-muted-foreground/25" />
40 </span>
41 </span>
42 <span
43 aria-hidden
44 className={cn(
45 "h-full shrink-0 overflow-hidden rounded-md bg-muted",
46 transitionClass,
47 panelsOpen ? "w-5" : "w-0",
48 )}
49 />
50 </button>
51 );
52}