command
Command with recent and favorites sections
Command with recent and favorites sections
Загрузка превью…
src/command/c-command-8.vue
<!--
Порт c-command-8 ("Command search everything", CommandDialog) —
.agent-tmp/reui-upstream/registry-reui/bases/radix/components/command/c-command-8.tsx
Диалог закрыт (см. c-command-2.vue) — начальное состояние апстрима.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@/components/ui/command"
</script>
<template>
<Button variant="outline">Search Everything</Button>
<CommandDialog>
<Command class="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
<CommandInput placeholder="Search or jump to..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Favorites">
<CommandItem value="Design System">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-500">
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
</svg>
<span>Design System</span>
</CommandItem>
<CommandItem value="API Documentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-yellow-500">
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
</svg>
<span>API Documentation</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Recent">
<CommandItem value="Dashboard Analytics">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
<path d="M12 6v6l4 2" />
<circle cx="12" cy="12" r="10" />
</svg>
<span>Dashboard Analytics</span>
<div class="ml-auto" data-slot="command-shortcut">
<span>2m ago</span>
</div>
</CommandItem>
<CommandItem value="User Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
<path d="M12 6v6l4 2" />
<circle cx="12" cy="12" r="10" />
</svg>
<span>User Settings</span>
<div class="ml-auto" data-slot="command-shortcut">
<span>15m ago</span>
</div>
</CommandItem>
<CommandItem value="Team Members">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
<path d="M12 6v6l4 2" />
<circle cx="12" cy="12" r="10" />
</svg>
<div class="flex flex-1 items-center justify-between">
<span>Team Members</span>
<div class="ml-auto" data-slot="command-shortcut">
<span>1h ago</span>
</div>
</div>
</CommandItem>
<CommandItem value="Billing & Plans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
<path d="M12 6v6l4 2" />
<circle cx="12" cy="12" r="10" />
</svg>
<span>Billing & Plans</span>
<div class="ml-auto" data-slot="command-shortcut">
<span>2h ago</span>
</div>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Quick Links">
<CommandItem value="Documentation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 7v14" />
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
</svg>
<span>Documentation</span>
</CommandItem>
<CommandItem value="Help & Support">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="m4.93 4.93 4.24 4.24" />
<path d="m14.83 9.17 4.24-4.24" />
<path d="m14.83 14.83 4.24 4.24" />
<path d="m9.17 14.83-4.24 4.24" />
<circle cx="12" cy="12" r="4" />
</svg>
<span>Help & Support</span>
</CommandItem>
<CommandItem value="Contact Us">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
</svg>
<span>Contact Us</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</CommandDialog>
</template>