Search Command Dialog

"use client"

import * as React from "react"
import { SearchCommand, CommandGroup, CommandItem } from "@/components/ui/search-command-dialog"
import { FileText, Settings, Users, Calculator, Calendar, Mail, HelpCircle } from "lucide-react"

export default function SearchCommandExample() {
  const commands: CommandGroup[] = [
    {
      heading: "Navigation",
      items: [
        {
          id: "dashboard",
          title: "Dashboard",
          description: "Go to the main dashboard",
          icon: FileText,
          action: () => console.log("Navigate to dashboard"),
          keywords: ["home", "main"],
        },
        {
          id: "settings",
          title: "Settings",
          description: "Open application settings",
          icon: Settings,
          action: () => console.log("Open settings"),
          keywords: ["preferences", "config"],
        },
        {
          id: "users",
          title: "Users",
          description: "Manage user accounts",
          icon: Users,
          action: () => console.log("Navigate to users"),
          keywords: ["accounts", "people"],
        },
      ],
    },
    {
      heading: "Tools",
      items: [
        {
          id: "calculator",
          title: "Calculator",
          description: "Open the calculator tool",
          icon: Calculator,
          action: () => console.log("Open calculator"),
          keywords: ["math", "compute"],
        },
        {
          id: "calendar",
          title: "Calendar",
          description: "View your calendar",
          icon: Calendar,
          action: () => console.log("Open calendar"),
          keywords: ["schedule", "events"],
        },
        {
          id: "mail",
          title: "Mail",
          description: "Check your messages",
          icon: Mail,
          action: () => console.log("Open mail"),
          keywords: ["email", "messages"],
        },
      ],
    },
    {
      heading: "Help",
      items: [
        {
          id: "help",
          title: "Help Center",
          description: "Get help and support",
          icon: HelpCircle,
          action: () => console.log("Open help"),
          keywords: ["support", "docs", "documentation"],
        },
      ],
    },
  ]

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
        <SearchCommand
          commands={commands}
          placeholder="Search for commands..."
          emptyMessage="No commands found."
        />
    </div>
  )
}