mode-selector

1"use client";
2 
3import { memo, useCallback, useState } from "react";
4import type { ComponentType } from "react";
5import { IconCheck, IconChevronDown } from "@tabler/icons-react";
6import { cn } from "../utils/cn";
7import { Popover } from "./popover";
8 
9export type ModeOption = {
10  id: string;
11  label: string;
12  icon?: ComponentType<{ className?: string }>;
13  description?: string;
14};
15 
16export type ModeSelectorProps = {
17  modes: ModeOption[];
18  value?: string;
19  defaultValue?: string;
20  onChange?: (modeId: string) => void;
21  className?: string;
22};
23 
24export const ModeSelector = memo(function ModeSelector({
25  modes,
26  value,
27  defaultValue,
28  onChange,
29  className,
30}: ModeSelectorProps) {
31  const isControlled = value !== undefined;
32  const [internalValue, setInternalValue] = useState(defaultValue);
33  const activeId = isControlled ? value : internalValue;
34  const activeMode = modes.find((m) => m.id === activeId) ?? modes[0];
35  const [open, setOpen] = useState(false);
36 
37  const handleSelect = useCallback(
38    (id: string) => {
39      if (!isControlled) setInternalValue(id);
40      onChange?.(id);
41      setOpen(false);
42    },
43    [isControlled, onChange],
44  );
45 
46  if (modes.length === 0) return null;
47  const ActiveIcon = activeMode?.icon;
48  const hasMultiple = modes.length > 1;
49 
50  const trigger = (
51    <button
52      type="button"
53      className={cn(
54        "inline-flex h-7 items-center gap-1.5 rounded-[6px] px-2 text-[12px] leading-4 text-foreground/40 transition-colors hover:bg-foreground/6 cursor-pointer",
55        !hasMultiple && "pointer-events-none",
56        className,
57      )}
58      aria-label="Select mode"
59    >
60      {ActiveIcon && <ActiveIcon className="size-3.5 shrink-0" />}
61      <span className="font-medium">{activeMode?.label}</span>
62      {hasMultiple && <IconChevronDown className="size-3 text-foreground/40" />}
63    </button>
64  );
65 
66  if (!hasMultiple) return trigger;
67 
68  return (
69    <Popover
70      open={open}
71      onOpenChange={setOpen}
72      side="top"
73      align="start"
74      trigger={trigger}
75    >
76      {modes.map((mode) => {
77        const isActive = mode.id === activeMode?.id;
78        const Icon = mode.icon;
79        return (
80          <button
81            key={mode.id}
82            type="button"
83            onClick={() => handleSelect(mode.id)}
84            className={cn(
85              "flex w-full items-start gap-2 rounded-[6px] px-2 py-1.5 text-left text-[12px] leading-4 text-an-foreground transition-colors hover:bg-foreground/6 cursor-pointer",
86// … truncated