65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
|
export const basicCommand=`import {
|
||
|
|
Calculator,
|
||
|
|
Calendar,
|
||
|
|
CreditCard,
|
||
|
|
Settings,
|
||
|
|
Smile,
|
||
|
|
User,
|
||
|
|
} from "lucide-react"
|
||
|
|
|
||
|
|
import {
|
||
|
|
Command,
|
||
|
|
CommandEmpty,
|
||
|
|
CommandGroup,
|
||
|
|
CommandInput,
|
||
|
|
CommandItem,
|
||
|
|
CommandList,
|
||
|
|
CommandSeparator,
|
||
|
|
CommandShortcut,
|
||
|
|
} from "@/components/ui/command"
|
||
|
|
const BasicCommand = () => {
|
||
|
|
return (
|
||
|
|
<div className="max-w-lg mx-auto">
|
||
|
|
<Command className="rounded-lg border shadow-md">
|
||
|
|
<CommandInput placeholder="Type a command or search..." />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
||
|
|
<CommandGroup heading="Suggestions">
|
||
|
|
<CommandItem>
|
||
|
|
<Calendar className="me-2 h-4 w-4" />
|
||
|
|
<span>Calendar</span>
|
||
|
|
</CommandItem>
|
||
|
|
<CommandItem>
|
||
|
|
<Smile className="me-2 h-4 w-4" />
|
||
|
|
<span>Search Emoji</span>
|
||
|
|
</CommandItem>
|
||
|
|
<CommandItem>
|
||
|
|
<Calculator className="me-2 h-4 w-4" />
|
||
|
|
<span>Calculator</span>
|
||
|
|
</CommandItem>
|
||
|
|
</CommandGroup>
|
||
|
|
<CommandSeparator />
|
||
|
|
<CommandGroup heading="Settings">
|
||
|
|
<CommandItem>
|
||
|
|
<User className="me-2 h-4 w-4" />
|
||
|
|
<span>Profile</span>
|
||
|
|
<CommandShortcut>⌘P</CommandShortcut>
|
||
|
|
</CommandItem>
|
||
|
|
<CommandItem>
|
||
|
|
<CreditCard className="me-2 h-4 w-4" />
|
||
|
|
<span>Billing</span>
|
||
|
|
<CommandShortcut>⌘B</CommandShortcut>
|
||
|
|
</CommandItem>
|
||
|
|
<CommandItem>
|
||
|
|
<Settings className="me-2 h-4 w-4" />
|
||
|
|
<span>Settings</span>
|
||
|
|
<CommandShortcut>⌘S</CommandShortcut>
|
||
|
|
</CommandItem>
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BasicCommand;`
|