Function ColorItem

src/components/command-palette.tsx:234–264

({ label, value, colorName = label, textValue }: ColorItemProps)

}

function ColorItem({ label, value, colorName = label, textValue }: ColorItemProps) {
  const { copied, copy } = useClipboard()
  return (
    <CommandMenuItem onAction={() => copy(value)} textValue={textValue}>
      <ColorSwatch
        className="mt-0.5 mr-2 [--color-swatch-size:--spacing(5)]"
        color={formatHex(parse(value))}
        colorName={colorName}
      />
      <CommandMenuLabel>{label}</CommandMenuLabel>
      <CommandMenuDescription className="text-xs tracking-tight">
        <span
          className={twJoin(
            'absolute inset-y-0 right-2 left-0 self-center justify-self-end font-mono focus:transition focus:duration-300',
            copied ? '-translate-y-1.5 opacity-0' : 'translate-y-0 opacity-100'
          )}
        >
          {value}
        </span>
        <span
          className={twJoin(
            'absolute inset-y-0 right-2 left-0 gap-x-1 self-center justify-self-end transition duration-300',
            copied ? 'translate-y-0 opacity-100' : 'translate-y-1.5 opacity-0'
          )}
        >
          Copied
        </span>
      </CommandMenuDescription>
    </CommandMenuItem>
  )
}