Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.1 kB · 38 lines
TSX
at perf/paste
123456789101112131415161718192021222324252627282930313233343536373839import { type ReactNode } from "react";
export function ToggleGroup<T extends string>(props: { value: T; onChange: (value: T, e?: React.MouseEvent) => void; options: { value: T; label: ReactNode }[]; className?: string; optionClassName?: string; selectedOptionClassName?: string; fullWidth?: boolean;}) { return ( <div className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm ${props.fullWidth ? "w-full" : "w-fit"} ${props.className || ""}`} > {props.options.map((option) => ( <button key={option.value} type="button" className={`px-1 rounded-md font-bold ${props.fullWidth ? "flex-1" : ""} ${ props.value === option.value ? `bg-accent-2 text-accent-1 ${props.selectedOptionClassName}` : `bg-transparent text-accent-2` } ${props.optionClassName} `} onClick={(e) => { e.preventDefault(); e.stopPropagation(); props.onChange(option.value); }} > {option.label} </button> ))} </div> );}