Command Palette

1"use client";
2 
3import {
4  AnimatePresence,
5  motion,
6  useReducedMotion,
7  type Transition,
8  type Variants,
9} from "framer-motion";
10import { File, Search, Settings, User, X } from "lucide-react";
11import { useMemo, useState } from "react";
12 
13type Command = {
14  icon: typeof File;
15  label: string;
16  shortcut: string;
17  description: string;
18};
19 
20const commands: Command[] = [
21  {
22    icon: File,
23    label: "New File",
24    shortcut: "⌘N",
25    description: "Spin up a glassmorphic canvas",
26  },
27  {
28    icon: Settings,
29    label: "Workspace Settings",
30    shortcut: "⌘,",
31    description: "Fine-tune tokens, motion, and themes",
32  },
33  {
34    icon: User,
35    label: "Team Directory",
36    shortcut: "⌘P",
37    description: "Invite collaborators to your motion library",
38  },
39  {
40    icon: Search,
41    label: "Global Command",
42    shortcut: "⌘K",
43    description: "Jump anywhere with palette search",
44  },
45];
46 
47const overlayTransition: Transition = { duration: 0.24, ease: "easeOut" };
48 
49export function CommandPalette() {
50  const [isOpen, setIsOpen] = useState(false);
51  const [query, setQuery] = useState("");
52  const shouldReduceMotion = useReducedMotion();
53 
54  const filteredCommands = useMemo(
55    () =>
56      commands.filter((cmd) =>
57        cmd.label.toLowerCase().includes(query.toLowerCase())
58      ),
59    [query]
60  );
61 
62  const panelVariants: Variants = shouldReduceMotion
63    ? {
64        initial: { opacity: 0, y: 0, scale: 1 },
65        animate: { opacity: 1, y: 0, scale: 1 },
66        exit: { opacity: 0, y: 0, scale: 1 },
67      }
68    : {
69        initial: { opacity: 0, scale: 0.96, y: 20, filter: "blur(6px)" },
70        animate: {
71          opacity: 1,
72          scale: 1,
73          y: 0,
74          filter: "blur(0px)",
75          transition: { duration: 0.28, ease: [0.18, 0.89, 0.32, 1.12] },
76        },
77        exit: {
78          opacity: 0,
79          scale: 0.97,
80          y: 12,
81          filter: "blur(8px)",
82          transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
83        },
84      };
85 
86  return (
87    <div className="relative">
88      <motion.button
89        type="button"
90        onClick={() => setIsOpen(true)}
91// … truncated