42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
|
import { Button } from "@repo/shadcn-ui/components/button";
|
||
|
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
export function IconPicker({
|
||
|
|
label,
|
||
|
|
options,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
disabled = false,
|
||
|
|
}: {
|
||
|
|
label: string;
|
||
|
|
options: readonly { value: string; label: string; icon: ReactNode }[];
|
||
|
|
value: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<fieldset className="space-y-2" disabled={disabled}>
|
||
|
|
<legend className="text-sm font-medium">{label}</legend>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{options.map((option) => (
|
||
|
|
<Button
|
||
|
|
aria-label={option.label}
|
||
|
|
aria-pressed={value === option.value}
|
||
|
|
className={
|
||
|
|
value === option.value ? "border-primary text-primary ring-1 ring-primary" : ""
|
||
|
|
}
|
||
|
|
key={option.value}
|
||
|
|
onClick={() => onChange(option.value)}
|
||
|
|
size="icon"
|
||
|
|
title={option.label}
|
||
|
|
type="button"
|
||
|
|
variant={value === option.value ? "secondary" : "outline"}
|
||
|
|
>
|
||
|
|
{option.icon}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
);
|
||
|
|
}
|