Command

1<script lang="ts">
2	import CalculatorIcon from '@lucide/svelte/icons/calculator';
3	import CalendarIcon from '@lucide/svelte/icons/calendar';
4	import CreditCardIcon from '@lucide/svelte/icons/credit-card';
5	import SettingsIcon from '@lucide/svelte/icons/settings';
6	import SmileIcon from '@lucide/svelte/icons/smile';
7	import UserIcon from '@lucide/svelte/icons/user';
8	import * as Command from './index.js';
9</script>
10
11<Command.Root class="rounded-lg border shadow-md md:min-w-[450px]">
12	<Command.Input placeholder="Type a command or search..." />
13	<Command.List>
14		<Command.Empty>No results found.</Command.Empty>
15		<Command.Group heading="Suggestions">
16			<Command.Item>
17				<CalendarIcon />
18				<span>Calendar</span>
19			</Command.Item>
20			<Command.Item>
21				<SmileIcon />
22				<span>Search Emoji</span>
23			</Command.Item>
24			<Command.Item disabled>
25				<CalculatorIcon />
26				<span>Calculator</span>
27			</Command.Item>
28		</Command.Group>
29		<Command.Separator />
30		<Command.Group heading="Settings">
31			<Command.Item>
32				<UserIcon />
33				<span>Profile</span>
34				<Command.Shortcut>⌘P</Command.Shortcut>
35			</Command.Item>
36			<Command.Item>
37				<CreditCardIcon />
38				<span>Billing</span>
39				<Command.Shortcut>⌘B</Command.Shortcut>
40			</Command.Item>
41			<Command.Item>
42				<SettingsIcon />
43				<span>Settings</span>
44				<Command.Shortcut>⌘S</Command.Shortcut>
45			</Command.Item>
46		</Command.Group>
47	</Command.List>
48</Command.Root>
49