Command

"use client";
import { useState } from "react";
import { command, Command } from "@/ui/command";
import { HomeIcon } from "@/icons/*";
import { Button } from "@/ui/button";

const data = ["Home", "About us", "Contacts", "Blog", "Careers", "Terms of service"];

export function CommandDemo() {
  const [query, setQuery] = useState("");

  const items = data.filter(item => item.toLowerCase().includes(query.toLowerCase().trim())).map(item => <Command.Action key={item} label={item} />);

  return (
    <>
      <Button onClick={command.open}>Open Command</Button>

      <Command.Root query={query} onQueryChange={setQuery}>
        <Command.Search placeholder="Search..." leftSection={<HomeIcon stroke={1.5} />} />
        <Command.ActionsList>{items.length > 0 ? items : <Command.Empty>Nothing found...</Command.Empty>}</Command.ActionsList>
      </Command.Root>
    </>
  );
}

"use client";
import { Command, type CommandActionData } from "@/ui/command";
import { CommandIcon, ComponentsIcon, HomeIcon } from "@/icons/*";

const singleData: CommandActionData[] = [
  { id: "1", href: "/", label: "Home", description: "Get to home page", leftSection: <HomeIcon size={18} /> },
  { id: "2", href: "/docs", label: "Docs", description: "Get to docs page", leftSection: <CommandIcon size={18} /> },
  { id: "3", href: "/docs/web/components", label: "Components", description: "Get to components page", leftSection: <ComponentsIcon size={18} /> }
];

export function CommandDataTypesSingleDemo() {
  return <Command modal={false} forceOpened actions={singleData} nothingFound="Oops..." searchProps={{ autoFocus: false }} />;
}

import { Command, type CommandActionGroupData } from "@/ui/command";

const dataGroup: CommandActionGroupData[] = [
  {
    group: "Frontend Frameworks",
    actions: [
      { id: "1-1", href: "https://reactjs.org/", label: "React", description: "A JavaScript library for building user interfaces." },
      { id: "1-2", href: "https://vuejs.org/", label: "Vue.js", description: "A progressive framework for building user interfaces." }
    ]
  },
  {
    group: "Backend Frameworks",
    actions: [
      { id: "2-1", href: "https://expressjs.com/", label: "Express", description: "Fast, unopinionated, minimalist web framework for Node.js." },
      { id: "2-2", href: "https://nestjs.com/", label: "NestJS", description: "A progressive Node.js framework for building efficient and scalable server-side applications." }
    ]
  },
  {
    group: "Databases",
    actions: [
      { id: "3-1", href: "https://www.mongodb.com/", label: "MongoDB", description: "A document database with the scalability and flexibility that you want with the querying and indexing that you need." },
      { id: "3-2", href: "https://www.postgresql.org/", label: "PostgreSQL", description: "A powerful, open-source object-relational database system." }
    ]
  },
  {
    group: "CSS Frameworks",
    actions: [
      { id: "4-1", href: "https://tailwindcss.com/", label: "Tailwind CSS", description: "A utility-first CSS framework for rapidly building custom user interfaces." },
      { id: "4-2", href: "https://getbootstrap.com/", label: "Bootstrap", description: "The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web." }
    ]
  },
  {
    group: "Development Tools",
    actions: [
      { id: "5-1", href: "https://code.visualstudio.com/", label: "VS Code", description: "A source-code editor developed by Microsoft for Windows, Linux, and macOS." },
      { id: "5-2", href: "https://git-scm.com/", label: "Git", description: "A free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency." }
    ]
  }
];

export function CommandDataTypesGroupDemo() {
  return <Command modal={false} forceOpened actions={dataGroup} nothingFound="Nothing..." searchProps={{ autoFocus: false }} />;
}

"use client";
import { Command, createCommand } from "@/ui/command";
import { Button } from "@/ui/button";
import { Stack } from "@/ui/stack";

const [firstStore, firstStoreState] = createCommand();
const [secondStore, secondStoreState] = createCommand();

export function CommandMultipleDemo() {
  return (
    <Stack>
      <Command store={firstStore} actions={[{ id: "command-1", label: "Command 1" }]} />
      <Command store={secondStore} actions={[{ id: "command-2", label: "Command 2" }]} />

      <Button onClick={firstStoreState.open}>Open Command 1</Button>
      <Button onClick={secondStoreState.open}>Open Command 2</Button>
    </Stack>
  );
}