| import React from "react"; |
| import { Check } from "lucide-react"; |
| import { cn } from "#/utils/utils"; |
| import { |
| dropdownMenuRowClassName, |
| dropdownMenuRowIconClassName, |
| } from "#/utils/dropdown-classes"; |
| import { ToggleSwitchVisual } from "#/ui/toggle-switch"; |
|
|
| export function MenuRow({ |
| icon: Icon, |
| label, |
| sublabel, |
| selected, |
| onClick, |
| testId, |
| disabled, |
| destructive, |
| variant = "radio", |
| }: { |
| icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean }>; |
| label: string; |
| /** Muted second line under the label (e.g. a threshold hint). */ |
| sublabel?: string; |
| selected?: boolean; |
| onClick: () => void; |
| testId?: string; |
| disabled?: boolean; |
| /** Destructive action rows (delete/reset) render in the danger color. */ |
| destructive?: boolean; |
| /** |
| * "radio" rows mark selection with a checkmark (mutually exclusive |
| * groups); "toggle" rows render a switch pill for independent on/off |
| * preferences that stay put after clicking (modal-style menus). |
| */ |
| variant?: "radio" | "toggle"; |
| }) { |
| const role = |
| selected === undefined |
| ? "menuitem" |
| : variant === "toggle" |
| ? "menuitemcheckbox" |
| : "menuitemradio"; |
| return ( |
| <button |
| type="button" |
| role={role} |
| aria-checked={selected === undefined ? undefined : Boolean(selected)} |
| data-testid={testId} |
| disabled={disabled} |
| onClick={onClick} |
| className={cn( |
| "group", |
| dropdownMenuRowClassName, |
| "disabled:opacity-50", |
| destructive ? "text-danger" : "text-[var(--oh-foreground)]", |
| )} |
| > |
| <Icon |
| className={cn( |
| "h-3.5 w-3.5", |
| dropdownMenuRowIconClassName, |
| destructive && |
| "text-danger group-hover:text-danger group-focus-visible:text-danger", |
| )} |
| aria-hidden |
| /> |
| <span className="min-w-0 flex-1"> |
| <span className="block truncate">{label}</span> |
| {sublabel ? ( |
| <span className="block truncate text-[10px] text-[var(--oh-muted)]/70"> |
| {sublabel} |
| </span> |
| ) : null} |
| </span> |
| {selected === undefined ? null : variant === "toggle" ? ( |
| <ToggleSwitchVisual |
| enabled={Boolean(selected)} |
| size="sm" |
| className="ml-auto" |
| /> |
| ) : selected ? ( |
| <Check |
| className="ml-auto h-3.5 w-3.5 shrink-0 text-white" |
| aria-hidden |
| /> |
| ) : null} |
| </button> |
| ); |
| } |
|
|
