Something went wrong. Try again.
ATProto-based AI Assistant Chat interface.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import { cva, type VariantProps } from 'class-variance-authority'import type { ReactNode } from 'react'import { CheckIcon } from '../icons.tsx'
/** * A chip for one of several choices in a row, with a hairline edge, or a quiet one with no edge for * a single choice in a quiet row, such as a layer's title. */const chip = cva( 'inline-flex cursor-pointer items-center whitespace-nowrap transition-[background-color,border-color,color] duration-(--dur-feedback) [-webkit-tap-highlight-color:transparent] aria-pressed:bg-accent-soft aria-pressed:font-medium aria-pressed:text-accent-strong aria-pressed:hover:bg-accent-soft-hover motion-reduce:transition-none', { variants: { tone: { default: 'gap-1 rounded-sm border border-line px-2 py-0.5 text-muted text-small hover:bg-hover aria-pressed:border-accent-border', quiet: 'gap-1.5 rounded-md px-2 py-1 font-medium text-caption text-muted hover:bg-row-hover [&_svg]:size-3.5', }, }, defaultVariants: { tone: 'default' }, },)
interface Props { pressed: boolean onPressedChange: (pressed: boolean) => void tone?: VariantProps<typeof chip>['tone'] /** An icon before the label while it is not pressed, which the check takes the place of. */ icon?: ReactNode children: ReactNode}
/** * A small button that stays pressed while what it names is on, such as one thing a model can do. * Pressed, it turns green and gains a check, so its state doesn't rest on color alone. */export function ToggleChip(props: Props) { return ( <button type="button" aria-pressed={props.pressed} onClick={() => props.onPressedChange(!props.pressed)} className={chip({ tone: props.tone })} > {props.pressed && <CheckIcon />} {!props.pressed && props.icon} {props.children} </button> )}