Command/command-standard-

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

export const title = "Command with Status Indicators";

const Example = () => (
  <Command className="h-auto w-full max-w-lg rounded-lg border shadow-md">
    <CommandInput placeholder="Search services..." />
    <CommandList>
      <CommandEmpty>No services found.</CommandEmpty>
      <CommandGroup heading="Services">
        <CommandItem>
          <div className="size-3 rounded-full bg-green-500 text-green-500" />
          <span>API Server</span>
          <span className="ml-auto text-xs text-muted-foreground">Running</span>
        </CommandItem>
        <CommandItem>
          <div className="size-3 rounded-full bg-green-500 text-green-500" />
          <span>Database</span>
          <span className="ml-auto text-xs text-muted-foreground">Running</span>
        </CommandItem>
        <CommandItem>
          <div className="size-3 rounded-full bg-yellow-500 text-yellow-500" />
          <span>Cache Server</span>
          <span className="ml-auto text-xs text-muted-foreground">Warning</span>
        </CommandItem>
        <CommandItem>
          <div className="size-3 rounded-full bg-red-500 text-red-500" />
          <span>Queue Worker</span>
          <span className="ml-auto text-xs text-muted-foreground">Stopped</span>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
);

export default Example;