Spotlight

import { Spotlight } from "@sigil-ui/components";

"use client";

import { useState } from "react";
import { Button, CommandMenu, Spotlight } from "@sigil-ui/components";

const TRAFFIC = [
  { month: "Apr", desktop: 186, mobile: 80 },
  { month: "May", desktop: 224, mobile: 112 },
  { month: "Jun", desktop: 208, mobile: 132 },
  { month: "Jul", desktop: 278, mobile: 166 },
  { month: "Aug", desktop: 305, mobile: 184 },
  { month: "Sep", desktop: 342, mobile: 218 },
];

function CommandMenuPreview({ spotlight = false }: { spotlight?: boolean }) {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState("No command selected.");
  const Menu = spotlight ? Spotlight : CommandMenu;
  const commands = [
    { value: "create", label: "Create project", description: "Start a new workspace" },
    { value: "invite", label: "Invite a teammate", description: "Share your workspace" },
    { value: "settings", label: "Project settings", description: "Manage your preferences" },
  ];
  return (
    <div className="grid gap-[var(--s-space-16)] w-full">
      <div><Button variant="outline" onClick={() => setOpen(true)}>Open {spotlight ? "spotlight" : "command menu"}</Button></div>
      <Menu open={open} onOpenChange={setOpen} items={commands.map((command) => ({
        ...command, onSelect: () => { setSelected(`${command.label} selected.`); setOpen(false); },
      }))} />
      <p role="status" className="text-[var(--s-text-muted)] text-[length:var(--s-size-sm)]">{selected}</p>
    </div>
  );
}

npx @sigil-ui/cli add spotlight