apple-spotlight

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { AnimatePresence, motion } from 'framer-motion';
5import {
6    Activity,
7    Calendar,
8    ChevronRight,
9    Files,
10    Folder,
11    Globe,
12    Image as ImageIcon,
13    LayoutGrid,
14    Mail,
15    MessageSquare,
16    Music,
17    Search,
18    Settings,
19    StickyNote,
20    Terminal,
21    Twitter
22} from 'lucide-react';
23import React, { useEffect, useRef, useState } from 'react';
24 
25interface Shortcut {
26    label: string;
27    icon: React.ReactNode;
28    link: string;
29}
30 
31interface SearchResult {
32    icon: React.ReactNode;
33    label: string;
34    description: string;
35    link: string;
36}
37 
38const SVGFilter = () => (
39    <svg width="0" height="0">
40        <filter id="blob">
41            <feGaussianBlur stdDeviation="10" in="SourceGraphic" />
42            <feColorMatrix
43                values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -9"
44                result="blob"
45            />
46            <feBlend in="SourceGraphic" in2="blob" />
47        </filter>
48    </svg>
49);
50 
51const ShortcutButton = ({ icon, link }: { icon: React.ReactNode; link: string }) => (
52    <a href={link} target="_blank">
53        <div className="rounded-full cursor-pointer hover:shadow-lg opacity-30 hover:opacity-100 transition-[opacity,shadow] duration-200">
54            <div className="size-16 aspect-square flex items-center justify-center">{icon}</div>
55        </div>
56    </a>
57);
58 
59const SpotlightPlaceholder = ({ text, className }: { text: string; className?: string }) => (
60    <motion.div layout className={cn('absolute text-gray-500 flex items-center pointer-events-none z-10', className)}>
61        <AnimatePresence mode="popLayout">
62            <motion.p
63                layoutId={`placeholder-${text}`}
64                key={`placeholder-${text}`}
65                initial={{ opacity: 0, y: 10, filter: 'blur(5px)' }}
66                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
67                exit={{ opacity: 0, y: -10, filter: 'blur(5px)' }}
68                transition={{ duration: 0.2, ease: 'easeOut' }}
69            >
70                {text}
71            </motion.p>
72        </AnimatePresence>
73    </motion.div>
74);
75 
76const SpotlightInput = ({
77    placeholder,
78    hidePlaceholder,
79    value,
80    onChange,
81    placeholderClassName
82}: {
83    placeholder: string;
84    hidePlaceholder: boolean;
85    value: string;
86    onChange: (value: string) => void;
87    placeholderClassName?: string;
88}) => {
89    const inputRef = useRef<HTMLInputElement>(null);
90 
91    useEffect(() => {
92// … truncated