import { Kbd, Shortcut } from "@/components/ui/unlumen-kbd";
export default function Demo() {
return (
<div className="flex flex-col items-center justify-center gap-6 p-8">
<div className="flex flex-wrap items-center justify-center gap-2">
{["⌘", "⌥", "⇧", "⌃", "⏎", "⌫", "⇥", "Esc"].map((key) => (
<Kbd key={key}>{key}</Kbd>
))}
</div>
<div className="flex flex-col gap-3 text-sm text-muted-foreground">
<div className="flex items-center justify-between gap-8">
<span>Save file</span>
<Shortcut keys={["⌘", "S"]} />
</div>
<div className="flex items-center justify-between gap-8">
<span>Open command menu</span>
<Shortcut keys={["⌘", "K"]} />
</div>
<div className="flex items-center justify-between gap-8">
<span>Undo</span>
<Shortcut keys={["⌘", "Z"]} />
</div>
<div className="flex items-center justify-between gap-8">
<span>Find & replace</span>
<Shortcut keys={["⌘", "⇧", "H"]} />
</div>
</div>
</div>
);
}
