Slash Menu

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/slash-menu

"use client";
import { useState } from "react";
import { Heading1, List, Code, Quote, Image, Table } from "lucide-react";

const items = [
  { icon: Heading1, label: "Heading", hint: "Big section heading", kbd: "#" },
  { icon: List, label: "Bullet list", hint: "Simple bulleted list", kbd: "-" },
  { icon: Code, label: "Code block", hint: "Capture a snippet", kbd: "```" },
  { icon: Quote, label: "Quote", hint: "Capture a quote", kbd: ">" },
  { icon: Image, label: "Image", hint: "Upload or embed", kbd: "/img" },
  { icon: Table, label: "Table", hint: "Add a table", kbd: "/tbl" },
];

export function SlashMenu({ onSelect }: { onSelect?: (label: string) => void }) {
  const [active, setActive] = useState(0);
  return (
    <div className="w-72 overflow-hidden rounded-xl border border-border bg-surface shadow-lg">
      <p className="px-3 pt-2 text-xs font-medium uppercase tracking-wide text-muted">Basic blocks</p>
      <ul className="p-1">
        {items.map((it, i) => (
          <li key={it.label}>
            <button
              onMouseEnter={() => setActive(i)}
              onClick={() => onSelect?.(it.label)}
              className={`flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left ${i === active ? "bg-surface-2" : ""}`}
            >
              <span className="flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background">
                <it.icon className="h-4 w-4" />
              </span>
              <span className="flex-1">
                <span className="block text-sm font-medium">{it.label}</span>
                <span className="block text-xs text-muted">{it.hint}</span>
              </span>
              <kbd className="rounded bg-background px-1.5 py-0.5 text-[10px] text-muted">{it.kbd}</kbd>
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}