openstatus.dev
Openstatus
www.openstatus.dev
1import { type VariantProps, cva } from "class-variance-authority";
2// Copy Pasta from: https://github.com/sadmann7/shadcn-table/blob/main/src/components/kbd.tsx#L54
3import * as React from "react";
4
5import { cn } from "@/lib/utils";
6
7const kbdVariants = cva(
8 "select-none rounded border px-1.5 py-px font-mono text-[0.7rem] font-normal shadow-xs disabled:opacity-50",
9 {
10 variants: {
11 variant: {
12 default: "bg-accent text-accent-foreground",
13 outline: "bg-background text-foreground",
14 },
15 },
16 defaultVariants: {
17 variant: "default",
18 },
19 },
20);
21
22export interface KbdProps
23 extends React.ComponentPropsWithoutRef<"kbd">,
24 VariantProps<typeof kbdVariants> {
25 /**
26 * The title of the `abbr` element inside the `kbd` element.
27 * @default undefined
28 * @type string | undefined
29 * @example title="Command"
30 */
31 abbrTitle?: string;
32}
33
34const Kbd = React.forwardRef<HTMLUnknownElement, KbdProps>(
35 ({ abbrTitle, children, className, variant, ...props }, ref) => {
36 return (
37 <kbd
38 className={cn(kbdVariants({ variant, className }))}
39 ref={ref}
40 {...props}
41 >
42 {abbrTitle ? (
43 <abbr title={abbrTitle} className="no-underline">
44 {children}
45 </abbr>
46 ) : (
47 children
48 )}
49 </kbd>
50 );
51 },
52);
53Kbd.displayName = "Kbd";
54
55export { Kbd };