Search

import { SearchCommandPalette } from "@launchapp/design-system/blocks/search";const results = [  { id: "1", title: "Dashboard", description: "Main dashboard", href: "/dashboard", type: "page" },  { id: "2", title: "Settings", description: "Account settings", href: "/settings", type: "page" },];export default function Page() {  return (    <SearchCommandPalette      results={results}      onSearch={(q) => console.log("search", q)}      onSelect={(item) => console.log("select", item)}    />  );}

import { SearchResults } from "@launchapp/design-system/blocks/search";const results = [  { id: "1", title: "Getting Started Guide", description: "Learn how to use LaunchApp.", type: "doc", href: "/docs/getting-started" },  { id: "2", title: "API Reference", description: "Complete API documentation.", type: "doc", href: "/docs/api" },];export default function Page() {  return (    <SearchResults      query="getting started"      searchResults={results}      totalCount={2}      onSearch={(q) => console.log("search", q)}      onResultClick={(item) => console.log("click", item)}    />  );}

import { CommandPalette } from "@launchapp/design-system/blocks/search";import * as React from "react";const groups = [  {    id: "pages",    label: "Pages",    items: [      { id: "dashboard", label: "Dashboard", shortcut: "G D" },      { id: "settings", label: "Settings", shortcut: "G S" },      { id: "team", label: "Team", shortcut: "G T" },    ],  },  {    id: "actions",    label: "Actions",    items: [      { id: "invite", label: "Invite teammate" },      { id: "new-project", label: "New project" },    ],  },];export default function Page() {  const [open, setOpen] = React.useState(false);  return (    <div className="flex flex-col items-center gap-4 p-6">      <button        type="button"        onClick={() => setOpen(true)}        className="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium"      >        Open palette        <kbd className="rounded border bg-muted px-1.5 font-mono text-[10px]">⌘K</kbd>      </button>      <CommandPalette        open={open}        onOpenChange={setOpen}        groups={groups}        placeholder="Search commands..."      />    </div>  );}

import { CommandPalette } from "@launchapp/design-system/blocks/search";import { useState } from "react";export default function Page() {  const [open, setOpen] = useState(false);  return (    <>      <button onClick={() => setOpen(true)}>Open Command Palette (⌘K)</button>      <CommandPalette        open={open}        onOpenChange={setOpen}        groups={[{ id: "pages", label: "Pages" }]}        actions={[          { id: "dashboard", label: "Dashboard", group: "pages", onSelect: () => console.log("dashboard") },          { id: "settings", label: "Settings", group: "pages", onSelect: () => console.log("settings") },          { id: "analytics", label: "Analytics", group: "pages", onSelect: () => console.log("analytics") },        ]}      />    </>  );}

import { SearchResults } from "@launchapp/design-system/blocks/search";export default function Page() {  return (    <SearchResults      query="design system"      searchResults={[        { id: "1", title: "Getting Started Guide", excerpt: "Learn how to use LaunchApp.", url: "/docs/getting-started" },        { id: "2", title: "Dashboard", excerpt: "Main dashboard overview.", url: "/dashboard" },        { id: "3", title: "API Reference", excerpt: "Complete API documentation.", url: "/docs/api" },      ]}      totalCount={3}      onSearch={(q) => console.log("search", q)}      onResultClick={(result) => console.log("click", result.id)}    />  );}