import * as Kbd from '@/components/ui/kbd';

function IconCmd(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      width='10'
      height='10'
      viewBox='0 0 10 10'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      {...props}
    >
      <path
        d='M1.90057 9.11932C1.55398 9.11932 1.2358 9.03409 0.946023 8.86364C0.65625 8.69034 0.426136 8.46023 0.255682 8.1733C0.0852273 7.88352 0 7.56534 0 7.21875C0 6.86932 0.0852273 6.55114 0.255682 6.2642C0.426136 5.97443 0.65625 5.7429 0.946023 5.5696C1.2358 5.39631 1.55398 5.30966 1.90057 5.30966H2.83807V3.80114H1.90057C1.55398 3.80114 1.2358 3.71591 0.946023 3.54545C0.65625 3.375 0.426136 3.14631 0.255682 2.85938C0.0852273 2.5696 0 2.25 0 1.90057C0 1.55114 0.0852273 1.23295 0.255682 0.946023C0.426136 0.659091 0.65625 0.430398 0.946023 0.259943C1.2358 0.0866477 1.55398 0 1.90057 0C2.25 0 2.56818 0.0866477 2.85511 0.259943C3.14489 0.430398 3.375 0.659091 3.54545 0.946023C3.71875 1.23295 3.8054 1.55114 3.8054 1.90057V2.82955H5.31818V1.90057C5.31818 1.55114 5.40341 1.23295 5.57386 0.946023C5.74432 0.659091 5.97301 0.430398 6.25994 0.259943C6.54972 0.0866477 6.86932 0 7.21875 0C7.56818 0 7.88636 0.0866477 8.1733 0.259943C8.46023 0.430398 8.68892 0.659091 8.85938 0.946023C9.02983 1.23295 9.11506 1.55114 9.11506 1.90057C9.11506 2.25 9.02983 2.5696 8.85938 2.85938C8.68892 3.14631 8.46023 3.375 8.1733 3.54545C7.88636 3.71591 7.56818 3.80114 7.21875 3.80114H6.28551V5.30966H7.21875C7.56818 5.30966 7.88636 5.39631 8.1733 5.5696C8.46023 5.7429 8.68892 5.97443 8.85938 6.2642C9.02983 6.55114 9.11506 6.86932 9.11506 7.21875C9.11506 7.56534 9.02983 7.88352 8.85938 8.1733C8.68892 8.46023 8.46023 8.69034 8.1733 8.86364C7.88636 9.03409 7.56818 9.11932 7.21875 9.11932C6.86932 9.11932 6.54972 9.03409 6.25994 8.86364C5.97301 8.69034 5.74432 8.46023 5.57386 8.1733C5.40341 7.88352 5.31818 7.56534 5.31818 7.21875V6.28125H3.8054V7.21875C3.8054 7.56534 3.71875 7.88352 3.54545 8.1733C3.375 8.46023 3.14489 8.69034 2.85511 8.86364C2.56818 9.03409 2.25 9.11932 1.90057 9.11932ZM1.90057 8.14773C2.07386 8.14773 2.23011 8.10653 2.36932 8.02415C2.51136 7.94176 2.625 7.82955 2.71023 7.6875C2.79545 7.54546 2.83807 7.3892 2.83807 7.21875V6.28125H1.90057C1.73011 6.28125 1.57386 6.32386 1.43182 6.40909C1.28977 6.49148 1.17614 6.60369 1.09091 6.74574C1.00852 6.88778 0.96733 7.04545 0.96733 7.21875C0.96733 7.3892 1.00852 7.54546 1.09091 7.6875C1.17614 7.82955 1.28977 7.94176 1.43182 8.02415C1.57386 8.10653 1.73011 8.14773 1.90057 8.14773ZM1.90057 2.82955H2.83807V1.90057C2.83807 1.72727 2.79545 1.57102 2.71023 1.43182C2.625 1.28977 2.51136 1.17756 2.36932 1.09517C2.23011 1.01278 2.07386 0.971591 1.90057 0.971591C1.73011 0.971591 1.57386 1.01278 1.43182 1.09517C1.28977 1.17756 1.17614 1.28977 1.09091 1.43182C1.00852 1.57102 0.96733 1.72727 0.96733 1.90057C0.96733 2.07386 1.00852 2.23153 1.09091 2.37358C1.17614 2.51278 1.28977 2.62358 1.43182 2.70597C1.57386 2.78835 1.73011 2.82955 1.90057 2.82955ZM6.28551 2.82955H7.21875C7.39205 2.82955 7.5483 2.78835 7.6875 2.70597C7.8267 2.62358 7.9375 2.51278 8.01989 2.37358C8.10511 2.23153 8.14773 2.07386 8.14773 1.90057C8.14773 1.72727 8.10511 1.57102 8.01989 1.43182C7.9375 1.28977 7.8267 1.17756 7.6875 1.09517C7.5483 1.01278 7.39205 0.971591 7.21875 0.971591C7.04545 0.971591 6.88778 1.01278 6.74574 1.09517C6.60369 1.17756 6.49148 1.28977 6.40909 1.43182C6.3267 1.57102 6.28551 1.72727 6.28551 1.90057V2.82955ZM7.21875 8.14773C7.39205 8.14773 7.5483 8.10653 7.6875 8.02415C7.8267 7.94176 7.9375 7.82955 8.01989 7.6875C8.10511 7.54546 8.14773 7.3892 8.14773 7.21875C8.14773 7.04545 8.10511 6.88778 8.01989 6.74574C7.9375 6.60369 7.8267 6.49148 7.6875 6.40909C7.5483 6.32386 7.39205 6.28125 7.21875 6.28125H6.28551V7.21875C6.28551 7.3892 6.3267 7.54546 6.40909 7.6875C6.49148 7.82955 6.60369 7.94176 6.74574 8.02415C6.88778 8.10653 7.04545 8.14773 7.21875 8.14773ZM3.8054 5.30966H5.31818V3.80114H3.8054V5.30966Z'
        fill='currentColor'
      />
    </svg>
  );
}

export function KbdDemo() {
  return (
    <Kbd.Root>
      <IconCmd className='size-2.5' />
      +K
    </Kbd.Root>
  );
}
Kbd

Instalación

Uso

Ejemplos oficiales (1)
