58:I[18486,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/02hnldgi9kpea.js","/_next/static/chunks/0n5ps7wq4dapa.js","/_next/static/chunks/00qnunoym8707.js","/_next/static/chunks/3vqyiv2v25v6h.js","/_next/static/chunks/2fcjhy-fz5wnq.js","/_next/static/chunks/15w1syeajrvbv.js","/_next/static/chunks/0b29fkwlbx2p4.js","/_next/static/chunks/0u06fjo_5b_bm.js","/_next/static/chunks/3s_vtn9-o6axf.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/28yp59f718zp6.js","/_next/static/chunks/36dqcnwhlmhvd.js","/_next/static/chunks/2p_v76tofj0-t.js","/_next/static/chunks/3qyzbdc59bipe.js","/_next/static/chunks/2ugulmxbv5uj0.js","/_next/static/chunks/2uq2kbfclw4fg.js","/_next/static/chunks/2eif6kwkbfl1v.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/0tjcxouu9yygq.js","/_next/static/chunks/051do_f-zm8-n.js","/_next/static/chunks/0w06a4b20st5r.js","/_next/static/chunks/29-ejmsedrilp.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/0ys5fqsi-2imd.js","/_next/static/chunks/32kf8tnnju2xc.js","/_next/static/chunks/37fxrooh6apyh.js","/_next/static/chunks/3i_85ptr6ldt9.js","/_next/static/chunks/1n-tt9-3lg032.js","/_next/static/chunks/203gxar08ia6h.js","/_next/static/chunks/172r_2v6ayun0.js","/_next/static/chunks/332qr_vlz8t9f.js","/_next/static/chunks/380e_okshg0ij.js","/_next/static/chunks/3oi2f2hg83rth.js","/_next/static/chunks/03zmd-m4rfp4v.js","/_next/static/chunks/3sex1y1diokbz.js","/_next/static/chunks/1mwg_4l82b-k1.js","/_next/static/chunks/1pvh9di5ogbf1.js","/_next/static/chunks/2uvmwrp4luphi.js","/_next/static/chunks/2s4u-e7v8s32w.js","/_next/static/chunks/3d2e2qew1t5n-.js","/_next/static/chunks/0-dmopvx8_5cq.js","/_next/static/chunks/0ht3fekr3tf-z.js","/_next/static/chunks/1q7qe3w6dkijf.js","/_next/static/chunks/4008p8wn8s_mo.js","/_next/static/chunks/1qloy5bnf1yll.js","/_next/static/chunks/2ajvsktgf6m-p.js","/_next/static/chunks/2t8bns5b0w0l8.js","/_next/static/chunks/2sj2ezgytcp6l.js"],"ExpandableCode"] 59:T5084,

"use client";

import {
  FilePlus2,
  Folder,
  FolderPlus,
  House,
  Keyboard,
  Search,
  Settings2,
  UsersRound,
} from "lucide-react";
import { useState } from "react";
import {
  type MorphicCommandItem,
  MorphicCommandPalette,
  MorphicCommandPaletteContent,
  MorphicCommandPaletteTrigger,
} from "@/components/premium/morphic-command-palette";

const commands: MorphicCommandItem[] = [
  {
    id: "home",
    label: "Home",
    group: "Navigation",
    icon: House,
    keywords: ["dashboard", "overview"],
  },
  { id: "projects", label: "Projects", group: "Navigation", icon: Folder },
  {
    id: "team",
    label: "Team",
    group: "Navigation",
    icon: UsersRound,
    keywords: ["members", "people"],
  },
  {
    id: "settings",
    label: "Settings",
    group: "Navigation",
    icon: Settings2,
    keywords: ["preferences", "account"],
  },
  {
    id: "new-document",
    label: "New document",
    group: "Actions",
    icon: FilePlus2,
    keywords: ["create", "page", "write"],
  },
  {
    id: "new-project",
    label: "New project",
    group: "Actions",
    icon: FolderPlus,
    keywords: ["create", "folder"],
  },
  {
    id: "shortcuts",
    label: "Keyboard shortcuts",
    group: "Actions",
    icon: Keyboard,
    keywords: ["help", "keys"],
  },
];

export function MorphicCommandPalettePreview() {
  const [selected, setSelected] = useState("");

  return (
    <div className="flex min-h-80 w-full flex-col items-center justify-center gap-3 p-6">
      <MorphicCommandPalette
        items={commands}
        shortcut="j"
        onSelect={(item) => setSelected(item.label)}
      >
        <MorphicCommandPaletteTrigger className="h-9">
          <Search aria-hidden className="size-4 text-muted-foreground" />
          <span>Open command palette</span>
          <kbd className="ml-3 text-xs text-muted-foreground">⌘ / Ctrl J</kbd>
        </MorphicCommandPaletteTrigger>
        <MorphicCommandPaletteContent />
      </MorphicCommandPalette>
      <output className="min-h-4 text-xs text-muted-foreground">
        {selected ? `Selected: ${selected}` : ""}
      </output>
    </div>
  );
}

57:["$","$L58",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$59"}}]}]

Morphic Command Palette

Command palette

Install