Omarchy Launcher Item

import * as React from "react"
import { cn } from "cn"

import { OmarchyShortcut } from "@/components/ui/omarchy-keycap"

/**
 * A single row in an Omarchy launcher or menu: an optional icon, the entry
 * name, a supporting line, and the shortcut that invokes it.
 *
 * `selected` is the visual highlight only. Inside a listbox, also pass
 * `role="option"` and `aria-selected` so assistive tech follows the highlight.
 */
function OmarchyLauncherItem({
  name,
  description,
  icon,
  keys,
  selected,
  className,
  ...props
}: React.ComponentProps<"button"> & {
  name: string
  description?: string
  icon?: React.ReactNode
  keys?: readonly string[]
  selected?: boolean
}) {
  return (
    <button
      type="button"
      data-slot="omarchy-launcher-item"
      data-selected={selected || undefined}
      className={cn(
        "flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors outline-none",
        "hover:bg-accent hover:text-accent-foreground",
        "focus-visible:ring-3 focus-visible:ring-ring/50",
        "data-[selected]:bg-accent data-[selected]:text-accent-foreground",
        className
      )}
      {...props}
    >
      {icon ? (
        <span
          aria-hidden
          className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&_svg:not([class*='size-'])]:size-4"
        >
          {icon}
        </span>
      ) : null}
      <span className="flex min-w-0 flex-col">
        <span className="truncate text-sm font-medium">{name}</span>
        {description ? (
          <span className="truncate text-xs text-muted-foreground">
            {description}
          </span>
        ) : null}
      </span>
      {keys ? <OmarchyShortcut keys={keys} className="ml-auto" /> : null}
    </button>
  )
}

export { OmarchyLauncherItem }