Ubuntu
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Command } from "@/components/retroui/Command";
|
|
|
|
import {
|
|
Calculator,
|
|
Calendar,
|
|
CreditCard,
|
|
Settings,
|
|
Smile,
|
|
User,
|
|
} from "lucide-react";
|
|
|
|
export default function Component() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
const down = (e: KeyboardEvent) => {
|
|
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
setOpen((open) => !open);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", down);
|
|
return () => document.removeEventListener("keydown", down);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<p className="text-muted-foreground text-sm">
|
|
Press{" "}
|
|
<kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
|
|
<span className="text-xs">⌘</span>J
|
|
</kbd>
|
|
</p>
|
|
<Command.Dialog open={open} onOpenChange={setOpen}>
|
|
<Command.Input placeholder="Type a command or search..." />
|
|
<Command.List>
|
|
<Command.Empty>No results found.</Command.Empty>
|
|
<Command.Group heading="Suggestions">
|
|
<Command.Item>
|
|
<Calendar />
|
|
<span>Calendar</span>
|
|
</Command.Item>
|
|
<Command.Item>
|
|
<Smile />
|
|
<span>Search Emoji</span>
|
|
</Command.Item>
|
|
<Command.Item>
|
|
<Calculator />
|
|
<span>Calculator</span>
|
|
</Command.Item>
|
|
</Command.Group>
|
|
<Command.Separator />
|
|
<Command.Group heading="Settings">
|
|
<Command.Item>
|
|
<User />
|
|
<span>Profile</span>
|
|
<Command.Shortcut>⌘P</Command.Shortcut>
|
|
</Command.Item>
|
|
<Command.Item>
|
|
<CreditCard />
|
|
<span>Billing</span>
|
|
<Command.Shortcut>⌘B</Command.Shortcut>
|
|
</Command.Item>
|
|
<Command.Item>
|
|
<Settings />
|
|
<span>Settings</span>
|
|
<Command.Shortcut>⌘S</Command.Shortcut>
|
|
</Command.Item>
|
|
</Command.Group>
|
|
</Command.List>
|
|
</Command.Dialog>
|
|
</>
|
|
);
|
|
}
|