Kbd

import * as React from "react"

import { cn } from "@/lib/utils"

interface KbdProps extends React.ComponentProps<"kbd"> {
  keys?: string[]
}

export function Kbd({ keys, className, children, ...props }: KbdProps) {
  if (keys && keys.length > 0) {
    return (
      <span className="inline-flex items-center gap-1">
        {keys.map((key) => (
          <Kbd key={key} className={className} {...props}>
            {key}
          </Kbd>
        ))}
      </span>
    )
  }
  return (
    <kbd
      className={cn(
        "inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 font-mono text-[0.7rem] font-medium text-muted-foreground shadow-[inset_0_-1px_0_var(--border)]",
        className
      )}
      {...props}
    >
      {children}
    </kbd>
  )
}