{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "blocks", "homepage": "https://blocks.so", "items": [ { "name": "ai-01", "type": "registry:block", "title": "AI Chat with Voice Input", "description": "A ai chat with voice input block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dropdown-menu", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/ai/ai-01.tsx", "type": "registry:component", "target": "components/ai-01.tsx", "content": "'use client';\n\nimport {\n IconMicrophone,\n IconPaperclip,\n IconPlus,\n IconSearch,\n IconSend,\n IconSparkles,\n IconWaveSine,\n} from '@tabler/icons-react';\nimport type React from 'react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport default function Ai01() {\n const [message, setMessage] = useState('');\n const [isExpanded, setIsExpanded] = useState(false);\n const textareaRef = useRef(null);\n const fileInputRef = useRef(null);\n\n const send = () => {\n if (!message.trim()) {\n return;\n }\n\n setMessage('');\n setIsExpanded(false);\n\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n send();\n };\n\n const handleTextareaChange = (e: React.ChangeEvent) => {\n setMessage(e.target.value);\n\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n\n setIsExpanded(e.target.value.length > 100 || e.target.value.includes('\\n'));\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n send();\n }\n };\n\n return (\n
\n

\n How can I help you today?\n

\n\n
\n \n\n \n \n
\n \n
\n
\n\n \n \n \n }\n >\n \n \n\n \n \n fileInputRef.current?.click()}\n >\n \n Add photos & files\n \n {}}\n >\n \n Agent mode\n \n {}}\n >\n \n Deep Research\n \n \n \n \n \n\n \n
\n \n \n \n\n \n \n \n\n \n \n \n
\n \n \n \n \n );\n}\n" } ], "categories": [ "ai" ] }, { "name": "ai-02", "type": "registry:block", "title": "AI Chat with Model Selection", "description": "A ai chat with model selection block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "select", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/ai/ai-02.tsx", "type": "registry:component", "target": "components/ai-02.tsx", "content": "'use client';\n\nimport {\n IconAlertTriangle,\n IconArrowUp,\n IconCloud,\n IconFileSpark,\n IconGauge,\n IconPhotoScan,\n} from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Textarea } from '@/components/ui/textarea';\n\nconst PROMPTS = [\n {\n icon: IconFileSpark,\n text: 'Write documentation',\n prompt:\n 'Write comprehensive documentation for this codebase, including setup instructions, API references, and usage examples.',\n },\n {\n icon: IconGauge,\n text: 'Optimize performance',\n prompt:\n 'Analyze the codebase for performance bottlenecks and suggest optimizations to improve loading times and runtime efficiency.',\n },\n {\n icon: IconAlertTriangle,\n text: 'Find and fix 3 bugs',\n prompt:\n 'Scan through the codebase to identify and fix 3 critical bugs, providing detailed explanations for each fix.',\n },\n];\n\nconst MODELS = [\n {\n value: 'gpt-5',\n name: 'GPT-5',\n description: 'Most advanced model',\n max: true,\n },\n {\n value: 'gpt-4o',\n name: 'GPT-4o',\n description: 'Fast and capable',\n },\n {\n value: 'claude-3.5',\n name: 'Claude 3.5 Sonnet',\n description: 'Great for coding tasks',\n },\n];\n\nexport default function Ai02() {\n const [inputValue, setInputValue] = useState('');\n const [modelValue, setModelValue] = useState(MODELS[0].value);\n const selectedModel = MODELS.find((m) => m.value === modelValue) ?? MODELS[0];\n const inputRef = useRef(null);\n\n const handlePromptClick = (prompt: string) => {\n if (inputRef.current) {\n inputRef.current.value = prompt;\n setInputValue(prompt);\n inputRef.current.focus();\n }\n };\n\n const maxBadge = (\n \n \n MAX\n \n \n );\n\n return (\n
\n
\n
\n setInputValue(e.target.value)}\n placeholder=\"Ask anything\"\n ref={inputRef}\n value={inputValue}\n />\n
\n\n
\n
\n \n
\n\n value && setModelValue(value)}\n value={modelValue}\n >\n \n \n \n {selectedModel.name}\n {selectedModel.max && maxBadge}\n \n \n \n \n {MODELS.map((model) => (\n \n \n \n {model.name}\n {model.max && maxBadge}\n \n \n {model.description}\n \n \n \n ))}\n \n \n\n
\n \n \n \n\n \n \n \n
\n
\n
\n\n
\n {PROMPTS.map((button) => {\n const IconComponent = button.icon;\n return (\n handlePromptClick(button.prompt)}\n variant=\"outline\"\n >\n \n {button.text}\n \n );\n })}\n
\n
\n );\n}\n" } ], "categories": [ "ai" ] }, { "name": "ai-03", "type": "registry:block", "title": "AI Chat Compact Interface", "description": "A ai chat compact interface block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dropdown-menu", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/ai/ai-03.tsx", "type": "registry:component", "target": "components/ai-03.tsx", "content": "'use client';\n\nimport {\n IconBolt,\n IconChevronDown,\n IconCircle,\n IconCircleDashed,\n IconCloud,\n IconCode,\n IconDeviceLaptop,\n IconHistory,\n IconPaperclip,\n IconPlus,\n IconProgress,\n IconRobot,\n IconSend,\n IconUser,\n IconWand,\n IconWorld,\n} from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport default function Ai03() {\n const [input, setInput] = useState('');\n const [selectedModel, setSelectedModel] = useState('Local');\n const [selectedAgent, setSelectedAgent] = useState('Agent');\n const [selectedPerformance, setSelectedPerformance] = useState('High');\n const [autoMode, setAutoMode] = useState(false);\n const fileInputRef = useRef(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim()) {\n }\n };\n\n return (\n
\n
\n {}}\n ref={fileInputRef}\n type=\"file\"\n />\n\n
\n
\n setInput(e.target.value)}\n onInput={(e) => {\n const target = e.target as HTMLTextAreaElement;\n target.style.height = 'auto';\n target.style.height = target.scrollHeight + 'px';\n }}\n placeholder=\"Ask anything\"\n rows={1}\n value={input}\n />\n \n
\n\n
\n
\n \n \n }\n >\n \n \n\n \n \n fileInputRef.current?.click()}\n >\n \n Attach Files\n \n {}}\n >\n \n Code Interpreter\n \n {}}\n >\n \n Web Search\n \n {}}\n >\n \n Chat History\n \n \n \n \n\n setAutoMode(!autoMode)}\n size=\"sm\"\n variant=\"ghost\"\n >\n \n Auto\n \n
\n\n
\n \n \n \n
\n
\n
\n\n
\n \n \n }\n >\n \n {selectedModel}\n \n \n \n \n setSelectedModel('Local')}\n >\n \n Local\n \n setSelectedModel('Cloud')}\n >\n \n Cloud\n \n \n \n \n\n \n \n }\n >\n \n {selectedAgent}\n \n \n \n \n setSelectedAgent('Agent')}\n >\n \n Agent\n \n setSelectedAgent('Assistant')}\n >\n \n Assistant\n \n \n \n \n\n \n \n }\n >\n \n {selectedPerformance}\n \n \n \n \n setSelectedPerformance('High')}\n >\n \n High\n \n setSelectedPerformance('Medium')}\n >\n \n Medium\n \n setSelectedPerformance('Low')}\n >\n \n Low\n \n \n \n \n\n
\n
\n
\n );\n}\n" } ], "categories": [ "ai" ] }, { "name": "ai-04", "type": "registry:block", "title": "AI Chat with File Attachments", "description": "A ai chat with file attachments block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "button", "dropdown-menu", "label", "switch", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/ai/ai-04.tsx", "type": "registry:component", "target": "components/ai-04.tsx", "content": "'use client';\n\nimport {\n IconAdjustmentsHorizontal,\n IconArrowUp,\n IconBrandFigma,\n IconCamera,\n IconCirclePlus,\n IconClipboard,\n IconFileUpload,\n IconHistory,\n IconLayoutDashboard,\n IconLink,\n IconPaperclip,\n IconPlayerPlay,\n IconPlus,\n IconSparkles,\n IconTemplate,\n IconX,\n} from '@tabler/icons-react';\nimport Image from 'next/image';\nimport { useRef, useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\ninterface AttachedFile {\n id: string;\n name: string;\n file: File;\n preview?: string;\n}\n\nconst ACTIONS = [\n { id: 'clone-screenshot', icon: IconCamera, label: 'Clone a Screenshot' },\n { id: 'import-figma', icon: IconBrandFigma, label: 'Import from Figma' },\n { id: 'upload-project', icon: IconFileUpload, label: 'Upload a Project' },\n { id: 'landing-page', icon: IconLayoutDashboard, label: 'Landing Page' },\n];\n\nexport default function Ai04({\n onSubmit,\n}: {\n onSubmit?: (prompt: string) => void;\n}) {\n const [prompt, setPrompt] = useState('');\n const [isDragOver, setIsDragOver] = useState(false);\n const [attachedFiles, setAttachedFiles] = useState([]);\n const fileInputRef = useRef(null);\n\n const [settings, setSettings] = useState({\n autoComplete: true,\n streaming: false,\n showHistory: false,\n });\n\n const generateFileId = () => Math.random().toString(36).substring(7);\n const processFiles = (files: File[]) => {\n for (const file of files) {\n const fileId = generateFileId();\n const attachedFile: AttachedFile = {\n id: fileId,\n name: file.name,\n file,\n };\n\n if (file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = () => {\n setAttachedFiles((prev) =>\n prev.map((f) =>\n f.id === fileId ? { ...f, preview: reader.result as string } : f\n )\n );\n };\n reader.readAsDataURL(file);\n }\n\n setAttachedFiles((prev) => [...prev, attachedFile]);\n }\n };\n const submitPrompt = () => {\n if (prompt.trim() && onSubmit) {\n onSubmit(prompt.trim());\n setPrompt('');\n }\n };\n const updateSetting = (key: keyof typeof settings, value: boolean) => {\n setSettings((prev) => ({ ...prev, [key]: value }));\n };\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n submitPrompt();\n };\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(true);\n };\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(false);\n };\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragOver(false);\n\n const files = Array.from(e.dataTransfer.files);\n if (files.length > 0) {\n processFiles(files);\n }\n };\n const handleTextareaChange = (e: React.ChangeEvent) => {\n setPrompt(e.target.value);\n };\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n submitPrompt();\n }\n };\n\n const handleFileSelect = (e: React.ChangeEvent) => {\n const files = Array.from(e.target.files || []);\n processFiles(files);\n\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n };\n\n const handleRemoveFile = (fileId: string) => {\n setAttachedFiles((prev) => prev.filter((file) => file.id !== fileId));\n };\n\n return (\n
\n

\n Prompt. Refine. Ship.\n

\n

\n Build real, working software just by describing it\n

\n\n
\n \n {attachedFiles.length > 0 && (\n
\n {attachedFiles.map((file) => (\n \n \n
\n {file.preview ? (\n \n ) : (\n \n )}\n
\n \n {file.name}\n \n \n handleRemoveFile(file.id)}\n type=\"button\"\n >\n \n \n \n ))}\n
\n )}\n \n\n
\n
\n \n\n \n \n }\n >\n \n \n \n \n fileInputRef.current?.click()}\n >\n
\n \n Attach Files\n
\n \n \n
\n \n Import from URL\n
\n \n \n
\n \n Paste from Clipboard\n
\n \n \n
\n \n Use Template\n
\n \n \n \n \n\n \n \n }\n >\n \n \n \n \n
\n
\n \n \n
\n \n updateSetting('autoComplete', value)\n }\n />\n
\n\n
\n
\n \n \n
\n \n updateSetting('streaming', value)\n }\n />\n
\n\n
\n
\n \n \n
\n \n updateSetting('showHistory', value)\n }\n />\n
\n \n \n \n
\n\n
\n \n \n \n
\n
\n\n \n \n \n Drop files here to add as attachments\n \n
\n \n
\n\n
\n {ACTIONS.map((action) => (\n \n \n {action.label}\n \n ))}\n
\n
\n );\n}\n" } ], "categories": [ "ai" ] }, { "name": "ai-05", "type": "registry:block", "title": "AI Elements Chat", "description": "A ai elements chat block.", "author": "ephraim duncan ", "registryDependencies": [ "button" ], "dependencies": [ "@tabler/icons-react", "ai" ], "files": [ { "path": "content/components/ai/ai-05.tsx", "type": "registry:component", "target": "components/ai-05.tsx", "content": "'use client';\n\n// Install AI Elements components:\n// npx ai-elements@latest add conversation message prompt-input\n\nimport {\n IconAdjustmentsHorizontal,\n IconBolt,\n IconPaperclip,\n IconPlus,\n} from '@tabler/icons-react';\nimport type { ChatStatus } from 'ai';\nimport { useState } from 'react';\nimport {\n Conversation,\n ConversationContent,\n ConversationScrollButton,\n} from '@/components/ai-elements/conversation';\nimport {\n Message,\n MessageContent,\n MessageResponse,\n} from '@/components/ai-elements/message';\nimport {\n PromptInput,\n PromptInputButton,\n PromptInputFooter,\n PromptInputSubmit,\n PromptInputTextarea,\n PromptInputTools,\n} from '@/components/ai-elements/prompt-input';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\ninterface DemoMessage {\n id: string;\n role: 'user' | 'assistant';\n content: string;\n}\n\nconst INITIAL_MESSAGES: DemoMessage[] = [\n {\n id: 'intro',\n role: 'assistant',\n content:\n 'Hi, I am your workspace assistant. I can draft copy, summarize documents, and turn notes into tasks. What are you working on?',\n },\n {\n id: 'question',\n role: 'user',\n content: 'Summarize the Q3 launch plan in three bullets.',\n },\n {\n id: 'answer',\n role: 'assistant',\n content:\n '- **Ship the new onboarding** by Sept 18 with an A/B test on pricing.\\n- **Open EU and APAC** with localized checkout.\\n- **Launch the partner API** in private beta with 12 partners.',\n },\n];\n\nconst SUGGESTIONS = [\n 'Draft a launch announcement',\n 'List open risks',\n 'Turn this into tasks',\n];\n\nconst RESPONSES = [\n 'Here is a quick outline you can reuse:\\n\\n1. Swap the mock response with a real API call.\\n2. Stream tokens into `MessageResponse`.\\n3. Keep the layout as-is for a consistent UI.',\n 'If you want multi-model support, add a small model selector to the prompt footer and pass the selection to your backend.',\n 'You can also inject tools like file upload or voice input by adding buttons to the prompt footer.',\n];\n\nexport default function Ai05() {\n const [messages, setMessages] = useState(INITIAL_MESSAGES);\n const [inputValue, setInputValue] = useState('');\n const [status, setStatus] = useState('ready');\n\n const handleSend = (text: string) => {\n const trimmed = text.trim();\n if (!trimmed || status !== 'ready') {\n return;\n }\n\n setMessages((prev) => [\n ...prev,\n { id: `user-${Date.now()}`, role: 'user', content: trimmed },\n ]);\n setInputValue('');\n setStatus('submitted');\n\n window.setTimeout(() => {\n setMessages((prev) => [\n ...prev,\n {\n id: `assistant-${Date.now()}`,\n role: 'assistant',\n content: RESPONSES[messages.length % RESPONSES.length],\n },\n ]);\n setStatus('ready');\n }, 1200);\n };\n\n const handleReset = () => {\n setMessages(INITIAL_MESSAGES.slice(0, 1));\n setInputValue('');\n setStatus('ready');\n };\n\n return (\n
\n
\n
\n
\n \n Assistant\n \n \n \n Online\n \n
\n
\n \n \n New chat\n \n \n \n \n
\n
\n\n \n \n {messages.map((message) => (\n \n \n {message.role === 'assistant' ? (\n {message.content}\n ) : (\n

\n {message.content}\n

\n )}\n \n \n ))}\n {status === 'submitted' && (\n \n \n {[0, 1, 2].map((dot) => (\n \n ))}\n \n \n )}\n \n \n \n\n
\n
\n {SUGGESTIONS.map((suggestion) => (\n handleSend(suggestion)}\n type=\"button\"\n >\n {suggestion}\n \n ))}\n
\n [data-slot=input-group]]:rounded-xl [&>[data-slot=input-group]]:border-border [&>[data-slot=input-group]]:bg-muted/40 [&>[data-slot=input-group]]:shadow-none\"\n onSubmit={(message) => handleSend(message.text)}\n >\n setInputValue(event.currentTarget.value)}\n placeholder=\"Message Assistant...\"\n value={inputValue}\n />\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n );\n}\n" } ], "categories": [ "ai" ] }, { "name": "chat-01", "type": "registry:block", "title": "Chat Basic", "description": "A chat basic block.", "author": "ephraim duncan ", "registryDependencies": [ "bubble", "button", "dropdown-menu", "input-group", "message", "message-scroller", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/chat/chat-01.tsx", "type": "registry:component", "target": "components/chat-01.tsx", "content": "'use client';\n\nimport {\n IconArrowUp,\n IconCopy,\n IconMicrophone,\n IconPaperclip,\n IconPhoto,\n IconPlayerStopFilled,\n IconPlus,\n IconRefresh,\n IconThumbDown,\n IconThumbUp,\n IconWorldSearch,\n} from '@tabler/icons-react';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from '@/components/ui/input-group';\nimport {\n Message,\n MessageContent,\n MessageFooter,\n} from '@/components/ui/message';\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '@/components/ui/message-scroller';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\ntype Turn = {\n id: string;\n role: 'user' | 'assistant';\n text: string;\n streaming?: boolean;\n};\n\nconst thread: Turn[] = [\n {\n id: '1',\n role: 'user',\n text: 'Is it true that a day on Venus is longer than its year?',\n },\n {\n id: '2',\n role: 'assistant',\n text: 'Yes. Venus takes 243 Earth days to rotate once, but only 225 days to orbit the Sun, so its day is longer than its year.\\n\\nIt also spins in the opposite direction to most planets, which means the Sun rises in the west there.',\n },\n { id: '3', role: 'user', text: 'How hot does it get on the surface?' },\n {\n id: '4',\n role: 'assistant',\n text: 'The surface sits around 465°C, hot enough to melt lead. The atmosphere traps so much heat that Venus stays hotter than Mercury, even though Mercury is much closer to the Sun.',\n },\n];\n\nconst replies = [\n 'Good question. Venus has no moons and no rings, which makes it unusual among the inner planets. Most explanations point to its slow, retrograde spin: any moon it once had would have drifted inward and been pulled apart by tidal forces.\\n\\nMercury is the only other moonless planet in the solar system.',\n 'The clouds are mostly sulfuric acid droplets, sitting about 50 to 70 km above the surface. They reflect roughly 75% of incoming sunlight, which is why Venus is the brightest object in our sky after the Moon.\\n\\nBelow the clouds the air is almost entirely carbon dioxide, with pressure about 92 times that of Earth at sea level.',\n 'Several landers have made it down. The Soviet Venera 7 was the first to transmit from the surface in 1970, and Venera 13 survived for 127 minutes in 1982, long enough to send back the first color photos.\\n\\nNothing has lasted more than a couple of hours; the heat and pressure destroy electronics quickly.',\n];\n\nconst thinkDelay = 600;\nconst wordDelay = 35;\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96]`;\nconst enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`;\nconst swap = `${easeOut} fade-in zoom-in-95 animate-in duration-150`;\n\nexport default function Chat01() {\n const [turns, setTurns] = useState(thread);\n const [draft, setDraft] = useState('');\n const [listening, setListening] = useState(false);\n const [replyIndex, setReplyIndex] = useState(0);\n const [edit, setEdit] = useState<{ id: string; text: string } | null>(null);\n const streaming = turns.some((t) => t.streaming);\n\n const stream = (replyId: string) => {\n const words = replies[replyIndex % replies.length].split(' ');\n setReplyIndex(replyIndex + 1);\n setTurns((prev) =>\n prev.map((t) =>\n t.id === replyId ? { ...t, text: '', streaming: true } : t\n )\n );\n let shown = 0;\n setTimeout(() => {\n const timer = setInterval(() => {\n shown += 1;\n const done = shown >= words.length;\n setTurns((prev) =>\n prev.map((t) =>\n t.id === replyId\n ? {\n ...t,\n text: words.slice(0, shown).join(' '),\n streaming: !done,\n }\n : t\n )\n );\n if (done) {\n clearInterval(timer);\n }\n }, wordDelay);\n }, thinkDelay);\n };\n\n const send = (e: React.FormEvent) => {\n e.preventDefault();\n const text = draft.trim();\n if (!text || streaming) {\n return;\n }\n const replyId = crypto.randomUUID();\n setTurns([\n ...turns,\n { id: crypto.randomUUID(), role: 'user', text },\n { id: replyId, role: 'assistant', text: '' },\n ]);\n setDraft('');\n stream(replyId);\n };\n\n const resend = () => {\n const text = edit?.text.trim();\n if (!(edit && text) || streaming) {\n return;\n }\n const at = turns.findIndex((t) => t.id === edit.id);\n const replyId = crypto.randomUUID();\n setTurns([\n ...turns.slice(0, at),\n { id: edit.id, role: 'user', text },\n { id: replyId, role: 'assistant', text: '' },\n ]);\n setEdit(null);\n stream(replyId);\n };\n\n const editLast = (e: React.KeyboardEvent) => {\n const last = turns.findLast((t) => t.role === 'user');\n if (e.key === 'ArrowUp' && !draft && last) {\n e.preventDefault();\n setEdit({ id: last.id, text: last.text });\n }\n };\n\n const body = (turn: Turn) => {\n const mine = turn.role === 'user';\n if (edit?.id === turn.id) {\n return (\n <>\n setEdit({ ...edit, text: e.target.value })}\n onKeyDown={(e) => {\n if (e.key === 'Escape') {\n setEdit(null);\n }\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n resend();\n }\n }}\n value={edit.text}\n />\n
\n navigator.clipboard.writeText(turn.text)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n setEdit(null)}\n size=\"sm\"\n variant=\"secondary\"\n >\n Cancel\n \n \n Send\n \n
\n \n );\n }\n if (turn.streaming && !turn.text) {\n return (\n \n Thinking…\n \n );\n }\n return turn.text.split('\\n\\n').map((paragraph) => (\n setEdit({ id: turn.id, text: turn.text }) : undefined\n }\n title={mine ? 'Double-click to edit' : undefined}\n variant=\"ghost\"\n >\n {paragraph}\n \n ));\n };\n\n return (\n
\n \n \n \n \n {turns.map((turn) => {\n const mine = turn.role === 'user';\n return (\n t.id === turn.id) && enter\n )}\n key={turn.id}\n messageId={turn.id}\n >\n \n \n {body(turn)}\n {!(mine || turn.streaming) && (\n \n \n navigator.clipboard.writeText(turn.text)\n }\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n \n \n \n \n \n \n stream(turn.id)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n \n )}\n \n \n \n );\n })}\n \n \n \n \n \n\n \n \n \n \n \n }\n >\n \n \n \n \n svg]:text-muted-foreground\">\n \n Add files\n \n svg]:text-muted-foreground\">\n \n Add photos\n \n svg]:text-muted-foreground\">\n \n Search the web\n \n \n \n \n \n setDraft(e.target.value)}\n onKeyDown={editLast}\n placeholder={listening ? 'Listening…' : 'Ask anything'}\n value={draft}\n />\n \n {draft.trim() ? (\n \n \n \n ) : (\n setListening(!listening)}\n size=\"icon-sm\"\n >\n {listening ? (\n \n ) : (\n \n )}\n \n )}\n \n \n

\n AI can make mistakes. Check important info.\n

\n \n
\n );\n}\n" } ], "categories": [ "chat" ] }, { "name": "chat-02", "type": "registry:block", "title": "Chat with Model Menu", "description": "A chat with model menu block.", "author": "ephraim duncan ", "registryDependencies": [ "bubble", "button", "dropdown-menu", "input-group", "message", "message-scroller", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/chat/chat-02.tsx", "type": "registry:component", "target": "components/chat-02.tsx", "content": "'use client';\n\nimport {\n IconArrowUp,\n IconChevronDown,\n IconCopy,\n IconDots,\n IconMicrophone,\n IconPaperclip,\n IconPencil,\n IconPhoto,\n IconPlayerStopFilled,\n IconPlus,\n IconRefresh,\n IconThumbDown,\n IconThumbUp,\n IconVolume,\n IconWorldSearch,\n} from '@tabler/icons-react';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Bubble, BubbleContent } from '@/components/ui/bubble';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupTextarea,\n} from '@/components/ui/input-group';\nimport {\n Message,\n MessageContent,\n MessageFooter,\n} from '@/components/ui/message';\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '@/components/ui/message-scroller';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\ntype Turn = {\n id: string;\n role: 'user' | 'assistant';\n text: string;\n streaming?: boolean;\n};\n\nconst thread: Turn[] = [\n {\n id: '1',\n role: 'user',\n text: 'Is it true that a day on Venus is longer than its year?',\n },\n {\n id: '2',\n role: 'assistant',\n text: 'Yes. Venus takes 243 Earth days to rotate once, but only 225 days to orbit the Sun, so its day is longer than its year.\\n\\nIt also spins in the opposite direction to most planets, which means the Sun rises in the west there.',\n },\n { id: '3', role: 'user', text: 'How hot does it get on the surface?' },\n {\n id: '4',\n role: 'assistant',\n text: 'The surface sits around 465°C, hot enough to melt lead. The atmosphere traps so much heat that Venus stays hotter than Mercury, even though Mercury is much closer to the Sun.',\n },\n {\n id: '5',\n role: 'user',\n text: 'How long would a person survive there without a suit?',\n },\n {\n id: '6',\n role: 'assistant',\n text: \"A few seconds at most. The pressure down there is 92 times Earth's, similar to being 900 meters underwater, and the heat alone would be fatal almost immediately.\\n\\nFor reference, the Soviet Venera landers were built for those conditions and still failed within about two hours.\",\n },\n];\n\nconst replies = [\n 'Good question. Venus has no moons and no rings, which makes it unusual among the inner planets. Most explanations point to its slow, retrograde spin: any moon it once had would have drifted inward and been pulled apart by tidal forces.\\n\\nMercury is the only other moonless planet in the solar system.',\n 'The clouds are mostly sulfuric acid droplets, sitting about 50 to 70 km above the surface. They reflect roughly 75% of incoming sunlight, which is why Venus is the brightest object in our sky after the Moon.\\n\\nBelow the clouds the air is almost entirely carbon dioxide, with pressure about 92 times that of Earth at sea level.',\n 'Several landers have made it down. The Soviet Venera 7 was the first to transmit from the surface in 1970, and Venera 13 survived for 127 minutes in 1982, long enough to send back the first color photos.\\n\\nNothing has lasted more than a couple of hours; the heat and pressure destroy electronics quickly.',\n];\n\nconst levels = [\n { name: 'Instant', hint: '5.5' },\n { name: 'Medium' },\n { name: 'High' },\n { name: 'Extra High' },\n { name: 'Pro' },\n];\n\nconst models = [\n 'GPT-6',\n 'GPT-5.6 Sol',\n 'GPT-6 Astra',\n 'GPT-5.6 Terra',\n 'GPT-5.6 Luna',\n];\n\nconst thinkDelay = 600;\nconst wordDelay = 35;\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`;\nconst swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`;\nconst item = 'rounded-lg px-2.5 py-1.75 text-[13px]';\n\nexport default function Chat02() {\n const [turns, setTurns] = useState(thread);\n const [draft, setDraft] = useState('');\n const [tall, setTall] = useState(false);\n const [listening, setListening] = useState(false);\n const [level, setLevel] = useState('Extra High');\n const [model, setModel] = useState('GPT-5.6 Sol');\n const [replyIndex, setReplyIndex] = useState(0);\n const [edit, setEdit] = useState<{ id: string; text: string } | null>(null);\n const streaming = turns.some((t) => t.streaming);\n\n const stream = (replyId: string) => {\n const words = replies[replyIndex % replies.length].split(' ');\n setReplyIndex(replyIndex + 1);\n setTurns((prev) =>\n prev.map((t) =>\n t.id === replyId ? { ...t, text: '', streaming: true } : t\n )\n );\n let shown = 0;\n setTimeout(() => {\n const timer = setInterval(() => {\n shown += 1;\n const done = shown >= words.length;\n setTurns((prev) =>\n prev.map((t) =>\n t.id === replyId\n ? {\n ...t,\n text: words.slice(0, shown).join(' '),\n streaming: !done,\n }\n : t\n )\n );\n if (done) {\n clearInterval(timer);\n }\n }, wordDelay);\n }, thinkDelay);\n };\n\n const send = (e: React.FormEvent) => {\n e.preventDefault();\n const text = draft.trim();\n if (!text || streaming) {\n return;\n }\n const replyId = crypto.randomUUID();\n setTurns([\n ...turns,\n { id: crypto.randomUUID(), role: 'user', text },\n { id: replyId, role: 'assistant', text: '' },\n ]);\n setDraft('');\n setTall(false);\n stream(replyId);\n };\n\n const resend = () => {\n const text = edit?.text.trim();\n if (!(edit && text) || streaming) {\n return;\n }\n const at = turns.findIndex((t) => t.id === edit.id);\n const reply = turns[at + 1];\n setTurns(turns.map((t) => (t.id === edit.id ? { ...t, text } : t)));\n setEdit(null);\n if (reply?.role === 'assistant') {\n stream(reply.id);\n }\n };\n\n const body = (turn: Turn, align: 'start' | 'end') => {\n if (edit?.id === turn.id) {\n return (\n <>\n setEdit({ ...edit, text: e.target.value })}\n onKeyDown={(e) => {\n if (e.key === 'Escape') {\n setEdit(null);\n }\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n resend();\n }\n }}\n value={edit.text}\n />\n
\n setEdit(null)}\n size=\"sm\"\n variant=\"secondary\"\n >\n Cancel\n \n \n Send\n \n
\n \n );\n }\n if (turn.streaming && !turn.text) {\n return (\n \n Thinking…\n \n );\n }\n return turn.text.split('\\n\\n').map((paragraph) => (\n \n \n {paragraph}\n \n \n ));\n };\n\n const action = (\n label: string,\n icon: React.ReactNode,\n onClick?: () => void\n ) => (\n \n {icon}\n \n );\n\n return (\n
\n \n \n \n \n {turns.map((turn) => {\n const mine = turn.role === 'user';\n const align = mine ? 'end' : 'start';\n return (\n t.id === turn.id) && enter\n )}\n key={turn.id}\n messageId={turn.id}\n >\n \n \n {body(turn, align)}\n {turn.text && edit?.id !== turn.id && (\n \n {action('Copy', , () =>\n navigator.clipboard.writeText(turn.text)\n )}\n {mine\n ? action(\n 'Edit',\n ,\n () =>\n setEdit({ id: turn.id, text: turn.text })\n )\n : action(\n 'Regenerate',\n ,\n () => stream(turn.id)\n )}\n {!mine && (\n \n \n )}\n />\n \n \n \n \n Good response\n \n \n \n Bad response\n \n \n \n Read aloud\n \n \n \n \n )}\n \n )}\n \n \n \n );\n })}\n \n \n \n \n Jump to latest\n \n \n \n\n \n \n \n \n \n }\n >\n \n \n \n \n \n \n Add files\n \n \n \n Add photos\n \n \n \n Search the web\n \n \n \n \n \n {\n setDraft(e.target.value);\n setTall(e.target.scrollHeight > 44);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n e.currentTarget.form?.requestSubmit();\n }\n }}\n placeholder={listening ? 'Listening…' : 'Ask anything'}\n rows={1}\n value={draft}\n />\n \n {draft.trim() ? (\n \n \n \n ) : (\n setListening(!listening)}\n size=\"icon-sm\"\n >\n {listening ? (\n \n ) : (\n \n )}\n \n )}\n \n \n }\n >\n {level}\n \n \n \n \n \n Intelligence\n \n \n {levels.map((l) => (\n \n {l.name}\n {l.hint && (\n \n {l.hint}\n \n )}\n \n ))}\n \n \n \n svg]:size-3.5 [&>svg]:text-muted-foreground'\n )}\n >\n {model}\n \n \n \n {models.map((m) => (\n \n {m}\n \n ))}\n \n \n \n \n \n \n \n \n

\n AI can make mistakes. Check important info.\n

\n \n
\n );\n}\n" } ], "categories": [ "chat" ] }, { "name": "chat-03", "type": "registry:block", "title": "Chat Application", "description": "A chat application block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "collapsible", "command", "dropdown-menu", "kbd", "message-scroller", "sidebar", "textarea" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/chat/chat-03/components/command-menu.tsx", "type": "registry:component", "target": "components/chat-03/command-menu.tsx", "content": "'use client';\n\nimport { IconFileText, IconMessage, IconPlus } from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandShortcut,\n} from '@/components/ui/command';\nimport { Kbd } from '@/components/ui/kbd';\nimport type { Thread } from '@/components/chat-03/conversation';\n\ntype Props = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n threads: Thread[];\n onOpen: (id: string) => void;\n onNew: (draft: string) => void;\n};\n\nconst heading =\n '**:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-[10px] **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.08em] **:[[cmdk-group-heading]]:text-muted-foreground/80';\nconst row = 'h-10 gap-3 rounded-lg px-2.5 text-[13px]';\n\nfunction useCommandKey(onToggle: () => void) {\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n onToggle();\n }\n };\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, [onToggle]);\n}\n\nexport function CommandMenu({\n open,\n onOpenChange,\n threads,\n onOpen,\n onNew,\n}: Props) {\n const [query, setQuery] = useState('');\n const q = query.trim().toLowerCase();\n useCommandKey(() => onOpenChange(!open));\n\n const messages = q\n ? threads.flatMap((t) =>\n t.turns\n .filter(\n (m) => m.role === 'assistant' && m.text.toLowerCase().includes(q)\n )\n .slice(0, 1)\n .map((m) => {\n const at = m.text.toLowerCase().indexOf(q);\n const start = Math.max(0, at - 40);\n return {\n id: m.id,\n threadId: t.id,\n thread: t.title,\n snippet: `${start > 0 ? '…' : ''}${m.text.slice(start, start + 90)}…`,\n };\n })\n )\n : [];\n\n const pick = (fn: () => void) => {\n fn();\n onOpenChange(false);\n setQuery('');\n };\n\n return (\n {\n onOpenChange(v);\n if (!v) {\n setQuery('');\n }\n }}\n open={open}\n title=\"Search\"\n >\n \n value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0\n }\n >\n \n \n \n No results for “{query}”\n \n \n {threads.map((t) => (\n pick(() => onOpen(t.id))}\n value={`${t.title} ${t.preview}`}\n >\n \n \n {t.title}\n \n {t.preview}\n \n \n \n {t.updated}\n \n \n ))}\n \n {messages.length > 0 && (\n \n {messages.map((m) => (\n pick(() => onOpen(m.threadId))}\n value={m.snippet}\n >\n \n \n {m.snippet}\n \n \n {m.thread}\n \n \n ))}\n \n )}\n \n pick(() => onNew(query.trim()))}\n value={`new chat ${query}`}\n >\n \n \n {q ? `New chat about “${query.trim()}”` : 'New chat'}\n \n \n ⌘N\n \n \n \n \n
\n \n \n ↑↓\n \n Navigate\n \n \n \n ↵\n \n Open\n \n
\n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/conversation.tsx", "type": "registry:component", "target": "components/chat-03/conversation.tsx", "content": "'use client';\n\nimport {\n IconAlertCircle,\n IconChevronDown,\n IconChevronRight,\n IconCopy,\n IconPencil,\n IconRefresh,\n IconThumbDown,\n IconThumbUp,\n} from '@tabler/icons-react';\nimport React, { Fragment } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from '@/components/ui/message-scroller';\nimport { cn } from '@/lib/utils';\n\nexport type Turn = {\n id: string;\n role: 'user' | 'assistant';\n text: string;\n reasoning?: string;\n thought?: number;\n streaming?: boolean;\n error?: boolean;\n day?: Thread['group'];\n};\n\nexport type Thread = {\n id: string;\n title: string;\n preview: string;\n updated: string;\n group: 'today' | 'yesterday' | 'week';\n pinned?: boolean;\n turns: Turn[];\n};\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`;\n\ntype Props = {\n thread: Thread | null;\n recent: Thread[];\n altModel: string;\n onOpen: (id: string) => void;\n onEdit: (turn: Turn) => void;\n onRetry: (turnId: string, model?: string) => void;\n};\n\nexport function Conversation({\n thread,\n recent,\n altModel,\n onOpen,\n onEdit,\n onRetry,\n}: Props) {\n if (!thread) {\n return (\n
\n
\n
\n

\n Where were we?\n

\n

\n Nothing here yet. Ask anything, or pick up a thread.\n

\n
\n
\n

\n Continue\n

\n {recent.map((t) => (\n onOpen(t.id)}\n type=\"button\"\n >\n \n {t.title}\n \n {t.preview}\n \n \n \n {t.updated}\n \n \n ))}\n
\n
\n
\n );\n }\n\n const action = (\n label: string,\n icon: React.ReactNode,\n onClick?: () => void\n ) => (\n \n {icon}\n \n );\n\n return (\n \n \n \n \n {thread.turns.map((turn, i) => {\n const day = turn.day ?? thread.group;\n const prev = thread.turns[i - 1];\n const divider = !prev || (prev.day ?? thread.group) !== day;\n return (\n \n {divider && (\n
\n
\n \n {\n {\n today: 'Today',\n yesterday: 'Yesterday',\n week: 'This week',\n }[day]\n }\n \n
\n
\n )}\n {turn.role === 'user' ? (\n \n
\n {turn.text}\n
\n
\n {action('Edit', , () =>\n onEdit(turn)\n )}\n {action('Copy', , () =>\n navigator.clipboard.writeText(turn.text)\n )}\n
\n \n ) : (\n \n {turn.error ? (\n <>\n
\n \n
\n

\n The response was interrupted\n

\n

\n The model stopped before finishing. Your message\n was not lost. Retry with the same model or\n switch to a different one.\n

\n
\n
\n
\n onRetry(turn.id)}\n >\n \n Retry\n \n onRetry(turn.id, altModel)}\n variant=\"outline\"\n >\n Retry with {altModel}\n \n
\n \n ) : (\n <>\n \n \n \n {turn.thought\n ? `Thought for ${turn.thought}s`\n : 'Thinking…'}\n \n \n {turn.reasoning}\n \n \n {turn.text && (\n

{turn.text}

\n )}\n {!turn.streaming && (\n
\n {action('Copy', , () =>\n navigator.clipboard.writeText(turn.text)\n )}\n {action(\n 'Good response',\n \n )}\n {action(\n 'Bad response',\n \n )}\n {action(\n 'Regenerate',\n ,\n () => onRetry(turn.id)\n )}\n
\n )}\n \n )}\n \n )}\n \n );\n })}\n \n \n \n \n Jump to latest\n \n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/composer.tsx", "type": "registry:component", "target": "components/chat-03/composer.tsx", "content": "'use client';\n\nimport {\n IconArrowUp,\n IconMicrophone,\n IconPaperclip,\n IconPhoto,\n IconPlayerStopFilled,\n IconPlus,\n IconWorld,\n IconX,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport type Attachment = { name: string; meta: string; kind: string };\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`;\nconst round = 'size-7.5 rounded-full';\n\ntype Props = {\n draft: string;\n onDraft: (v: string) => void;\n attachment: Attachment | null;\n onAttachment: (a: Attachment | null) => void;\n streaming: boolean;\n onSend: () => void;\n onStop: () => void;\n};\n\nexport function Composer({\n draft,\n onDraft,\n attachment,\n onAttachment,\n streaming,\n onSend,\n onStop,\n}: Props) {\n const [search, setSearch] = useState(false);\n const [listening, setListening] = useState(false);\n const canSend = draft.trim().length > 0 && !streaming;\n\n return (\n {\n e.preventDefault();\n if (canSend) {\n onSend();\n }\n }}\n >\n \n {attachment && (\n
\n
\n \n {attachment.kind}\n \n \n \n {attachment.name}\n \n \n {attachment.meta}\n \n \n onAttachment(null)}\n type=\"button\"\n >\n \n \n
\n
\n )}\n onDraft(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n e.currentTarget.form?.requestSubmit();\n }\n }}\n placeholder={listening ? 'Listening…' : 'Ask anything'}\n rows={1}\n value={draft}\n />\n
\n \n \n }\n >\n \n \n \n \n \n onAttachment({\n name: 'installer-quote.pdf',\n meta: '2 pages · 412 KB',\n kind: 'PDF',\n })\n }\n >\n \n Add files\n \n \n onAttachment({\n name: 'boiler-room.jpg',\n meta: '3024 × 4032 · 2.1 MB',\n kind: 'JPG',\n })\n }\n >\n \n Add photos\n \n \n \n \n setSearch(!search)}\n size=\"sm\"\n variant=\"outline\"\n >\n \n Search\n \n
\n setListening(!listening)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n {listening ? (\n \n ) : (\n \n )}\n \n {streaming ? (\n \n \n \n ) : (\n \n \n \n )}\n
\n
\n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/chat-sidebar.tsx", "type": "registry:component", "target": "components/chat-03/chat-sidebar.tsx", "content": "'use client';\n\nimport {\n IconArchive,\n IconDots,\n IconHelpCircle,\n IconKeyboard,\n IconLogout,\n IconPencil,\n IconPin,\n IconPlus,\n IconSearch,\n IconSelector,\n IconSettings,\n IconShare,\n IconSunMoon,\n IconTrash,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Kbd, KbdGroup } from '@/components/ui/kbd';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport type { Thread } from '@/components/chat-03/conversation';\n\nconst groups: { key: Thread['group'] | 'pinned'; label: string }[] = [\n { key: 'pinned', label: 'Pinned' },\n { key: 'today', label: 'Today' },\n { key: 'yesterday', label: 'Yesterday' },\n { key: 'week', label: 'Previous 7 days' },\n];\n\nconst item = 'h-8 gap-2.5 rounded-md px-2.5 text-[13px]';\n\ntype Props = {\n user: {\n name: string;\n email: string;\n plan: string;\n renews: string;\n avatar: string;\n };\n threads: Thread[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNew: () => void;\n onSearch: () => void;\n onChange: (threads: Thread[]) => void;\n};\n\nexport function ChatSidebar({\n user,\n threads,\n activeId,\n onSelect,\n onNew,\n onSearch,\n onChange,\n}: Props) {\n const [renameId, setRenameId] = useState(null);\n const [name, setName] = useState('');\n\n const commitRename = () => {\n if (renameId && name.trim()) {\n onChange(\n threads.map((t) =>\n t.id === renameId ? { ...t, title: name.trim() } : t\n )\n );\n }\n setRenameId(null);\n };\n\n return (\n \n \n \n \n \n Search chats\n \n ⌘K\n \n \n \n\n \n {groups.map(({ key, label }) => {\n const list = threads.filter((t) =>\n key === 'pinned' ? t.pinned : !t.pinned && t.group === key\n );\n if (list.length === 0) {\n return null;\n }\n return (\n \n \n {label}\n \n \n \n {list.map((t) => (\n \n {renameId === t.id ? (\n setName(e.target.value)}\n onFocus={(e) => e.target.select()}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n commitRename();\n }\n if (e.key === 'Escape') {\n setRenameId(null);\n }\n }}\n value={name}\n />\n ) : (\n <>\n onSelect(t.id)}\n >\n {t.title}\n \n \n {t.pinned ? (\n \n ) : (\n t.updated\n )}\n \n \n \n }\n >\n \n \n \n \n \n onChange(\n threads.map((x) =>\n x.id === t.id\n ? { ...x, pinned: !x.pinned }\n : x\n )\n )\n }\n >\n \n {t.pinned ? 'Unpin' : 'Pin'}\n \n {\n setRenameId(t.id);\n setName(t.title);\n }}\n >\n \n Rename\n \n \n \n Share\n \n \n onChange(\n threads.filter((x) => x.id !== t.id)\n )\n }\n >\n \n Archive\n \n \n \n \n onChange(threads.filter((x) => x.id !== t.id))\n }\n variant=\"destructive\"\n >\n \n Delete\n \n \n \n \n )}\n \n ))}\n \n \n \n );\n })}\n \n\n \n \n \n }\n >\n \n \n \n {user.name[0]}\n \n \n \n \n {user.name}\n \n \n {user.plan} · {user.email}\n \n \n \n \n \n
\n \n \n \n {user.name[0]}\n \n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n Settings\n \n ⌘\n ,\n \n \n \n \n Appearance\n \n System\n \n \n \n \n Keyboard shortcuts\n \n ⌘\n /\n \n \n \n \n Help & feedback\n \n \n \n
\n
\n {user.plan} plan\n \n Renews {user.renews}\n \n
\n \n
\n \n \n \n Log out\n \n \n \n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/logos.tsx", "type": "registry:component", "target": "components/chat-03/logos.tsx", "content": "import type { ComponentProps } from 'react';\n\nexport function OpenAILogo(props: ComponentProps<'svg'>) {\n return (\n \n \n \n );\n}\n\nexport function ClaudeLogo(props: ComponentProps<'svg'>) {\n return (\n \n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/app/chat/data.json", "type": "registry:page", "target": "app/chat/data.json", "content": "{\n \"user\": {\n \"name\": \"Ephraim Duncan\",\n \"email\": \"ephraim@duncan.land\",\n \"plan\": \"Pro\",\n \"renews\": \"Oct 12\",\n \"avatar\": \"/avatar-01.png\"\n },\n \"models\": [\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-6 Astra\",\n \"hint\": \"Most capable for complex reasoning and coding\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Sol\",\n \"hint\": \"Flagship for complex professional work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Terra\",\n \"hint\": \"Balances intelligence and cost\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Luna\",\n \"hint\": \"Fastest and most affordable\",\n \"context\": \"128K\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Fable 5.1\",\n \"hint\": \"Demanding reasoning and long-horizon agentic work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Opus 5\",\n \"hint\": \"Complex agentic coding and enterprise work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Sonnet 5\",\n \"hint\": \"Best combination of speed and intelligence\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Haiku 4.5\",\n \"hint\": \"Fastest with near-frontier intelligence\",\n \"context\": \"200K\"\n }\n ],\n \"replies\": [\n {\n \"reasoning\": \"The user wants a price check. Compare the quote against regional install averages, then weigh it against the payback window from earlier in the thread.\",\n \"text\": \"Your quote lands near the middle of the range for a cold-climate unit of that size. The equipment line is fair; the labor line is about 10% above typical. Ask the installer to itemize ductwork changes, since that is where the extra usually hides. With the rebate applied, payback still comes in under 8 years.\"\n },\n {\n \"reasoning\": \"Short factual answer. Note the trade-off between efficiency and noise so the user can decide.\",\n \"text\": \"Most modern units run between 40 and 60 dB at the outdoor fan, roughly the level of a quiet conversation. Placing the unit away from bedroom windows and on a vibration pad makes a bigger difference than the model choice.\"\n },\n {\n \"reasoning\": \"The user is asking about maintenance. List the few things that matter and skip the marketing extras.\",\n \"text\": \"Very little. Clean or swap the filter every one to three months, keep leaves and snow off the outdoor unit, and book a professional check once a year to confirm refrigerant levels. That is the whole list.\"\n }\n ],\n \"threads\": [\n {\n \"id\": \"design-tokens\",\n \"title\": \"Design system tokens\",\n \"preview\": \"Naming scheme for spacing and color\",\n \"updated\": \"3d\",\n \"group\": \"week\",\n \"pinned\": true,\n \"turns\": [\n {\n \"id\": \"dt-1\",\n \"role\": \"user\",\n \"text\": \"Should spacing tokens be named by size or by role?\"\n },\n {\n \"id\": \"dt-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Both approaches are common. Recommend a two-layer scheme so the team gets stable role names without losing raw sizes.\",\n \"text\": \"Use both, in two layers. Keep a raw scale (space-1 through space-12) and put role tokens on top of it (space-inline, space-stack, space-section). Components reference roles, so a scale change never touches component code.\"\n }\n ]\n },\n {\n \"id\": \"auth-refactor\",\n \"title\": \"Auth refactor plan\",\n \"preview\": \"Session cookies to short-lived JWTs\",\n \"updated\": \"5d\",\n \"group\": \"week\",\n \"pinned\": true,\n \"turns\": [\n {\n \"id\": \"ar-1\",\n \"role\": \"user\",\n \"text\": \"What is the safest order to migrate sessions to short-lived tokens?\"\n },\n {\n \"id\": \"ar-2\",\n \"role\": \"assistant\",\n \"thought\": 6,\n \"reasoning\": \"Migration needs a dual-read period. Outline steps that let the old and new paths coexist before cutting over.\",\n \"text\": \"Issue both for a release, read both, then stop issuing the old one. Start by adding token issuance next to the existing session write, make every auth check accept either, and only after a full expiry window remove the session path.\"\n }\n ]\n },\n {\n \"id\": \"heat-pump\",\n \"title\": \"Heat pump research\",\n \"preview\": \"Payback math on replacing a gas boiler\",\n \"updated\": \"2h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"hp-1\",\n \"role\": \"user\",\n \"text\": \"How do heat pumps keep working when it's freezing outside?\"\n },\n {\n \"id\": \"hp-2\",\n \"role\": \"assistant\",\n \"thought\": 8,\n \"reasoning\": \"Explain the physics briefly: refrigerant boiling point is far below freezing, so there is still heat to extract. Give one concrete efficiency figure at a cold temperature.\",\n \"text\": \"Even freezing air holds heat. A heat pump's refrigerant boils far below 0 °C, so it can absorb outdoor heat, compress it to raise the temperature, and release it inside. Modern cold-climate units keep 250–300% efficiency at −15 °C.\"\n },\n {\n \"id\": \"hp-3\",\n \"role\": \"user\",\n \"text\": \"Is it worth replacing a gas boiler mid-life?\"\n },\n {\n \"id\": \"hp-4\",\n \"role\": \"assistant\",\n \"thought\": 12,\n \"reasoning\": \"This depends on the price ratio between electricity and gas, the remaining boiler life, and rebates. Give the rule of thumb and the three inputs.\",\n \"text\": \"Usually yes, if your electricity-to-gas price ratio is under about 3.5. The math hinges on three numbers: your boiler's remaining life, local energy prices, and available rebates. Start with the rebates — in many regions they cover 30–40% of the install, which shortens payback to 6–8 years.\"\n }\n ]\n },\n {\n \"id\": \"sql-churn\",\n \"title\": \"SQL for churn cohort\",\n \"preview\": \"Window function draft, not yet run\",\n \"updated\": \"5h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"sc-1\",\n \"role\": \"user\",\n \"text\": \"Write a query that groups users by signup month and shows how many are still active 90 days later.\"\n },\n {\n \"id\": \"sc-2\",\n \"role\": \"assistant\",\n \"thought\": 9,\n \"reasoning\": \"Cohort by signup month, then join activity at day 90. Keep it to one CTE so it is easy to read.\",\n \"text\": \"Group by date_trunc of the signup date, then left join an activity subquery filtered to events within 90 days of signup. Count distinct users in both, and divide for the retention rate. I drafted it with a single CTE so you can swap the window without touching the join.\"\n }\n ]\n },\n {\n \"id\": \"lisbon\",\n \"title\": \"Trip to Lisbon in October\",\n \"preview\": \"Four days, mostly on foot\",\n \"updated\": \"2h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"li-1\",\n \"role\": \"user\",\n \"text\": \"Is October a good month for Lisbon?\"\n },\n {\n \"id\": \"li-2\",\n \"role\": \"assistant\",\n \"thought\": 3,\n \"reasoning\": \"Weather and crowds are the two things the user cares about. Keep it short.\",\n \"text\": \"One of the best. Days sit around 22 °C, the summer crowds are gone, and the sea is still warm enough to swim. Pack a light layer for evenings and expect a few short showers late in the month.\"\n }\n ]\n },\n {\n \"id\": \"q3-report\",\n \"title\": \"Q3 report outline\",\n \"preview\": \"Three sections drafted, intro missing\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"q3-1\",\n \"role\": \"user\",\n \"text\": \"Give me a three-part outline for a quarterly report to the board.\"\n },\n {\n \"id\": \"q3-2\",\n \"role\": \"assistant\",\n \"thought\": 5,\n \"reasoning\": \"Boards want results, then risks, then asks. Map the three sections to that order.\",\n \"text\": \"Results first, then risks, then asks. Open with the three numbers that moved and why, follow with the two things that could go wrong next quarter, and close with the decisions you need from the board. Keep each section to one page.\"\n }\n ]\n },\n {\n \"id\": \"dockerfile\",\n \"title\": \"Dockerfile multi-stage build\",\n \"preview\": \"Trim the final image below 100 MB\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"df-1\",\n \"role\": \"user\",\n \"text\": \"Why is my Node image 1.2 GB?\"\n },\n {\n \"id\": \"df-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Most likely a single-stage build carrying dev dependencies and the full base image. Recommend a multi-stage build on a slim base.\",\n \"text\": \"You are shipping the build toolchain. Build in one stage on the full image, then copy only the output and production node_modules into a second stage based on node:slim or distroless. That alone usually lands under 150 MB.\"\n }\n ]\n },\n {\n \"id\": \"naming\",\n \"title\": \"Naming a side project\",\n \"preview\": \"Short, spellable, domain available\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"nm-1\",\n \"role\": \"user\",\n \"text\": \"What makes a product name easy to remember?\"\n },\n {\n \"id\": \"nm-2\",\n \"role\": \"assistant\",\n \"thought\": 3,\n \"reasoning\": \"Keep to the practical rules: short, easy to spell after hearing it once, and not already crowded.\",\n \"text\": \"Two syllables, spellable after hearing it once, and no existing product in the same space with a similar sound. Say the name out loud in a sentence and see if you have to explain it.\"\n }\n ]\n },\n {\n \"id\": \"postgres\",\n \"title\": \"Postgres index bloat\",\n \"preview\": \"When to REINDEX versus VACUUM\",\n \"updated\": \"3d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"pg-1\",\n \"role\": \"user\",\n \"text\": \"How do I tell if an index is bloated?\"\n },\n {\n \"id\": \"pg-2\",\n \"role\": \"assistant\",\n \"thought\": 6,\n \"reasoning\": \"Point to pgstattuple for a real measurement, and give the rough threshold where REINDEX pays off.\",\n \"text\": \"Install pgstattuple and check the leaf fragmentation and free space of the index. Anything above about 30% free space on a hot index is worth a REINDEX CONCURRENTLY. VACUUM alone will not shrink it.\"\n }\n ]\n },\n {\n \"id\": \"cover-letter\",\n \"title\": \"Cover letter rewrite\",\n \"preview\": \"Cut to half a page\",\n \"updated\": \"5d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"cl-1\",\n \"role\": \"user\",\n \"text\": \"My cover letter is a full page. What should I cut?\"\n },\n {\n \"id\": \"cl-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Most cover letters repeat the resume. Cut everything that is already there and keep the one story that is not.\",\n \"text\": \"Cut anything the resume already says. Keep one short story that shows how you work, one sentence on why this company, and a plain closing line. That is half a page.\"\n }\n ]\n },\n {\n \"id\": \"rust\",\n \"title\": \"Rust lifetimes explained\",\n \"preview\": \"Borrow checker with two references\",\n \"updated\": \"6d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"rs-1\",\n \"role\": \"user\",\n \"text\": \"Why does the compiler want a lifetime on this function returning a reference?\"\n },\n {\n \"id\": \"rs-2\",\n \"role\": \"assistant\",\n \"thought\": 7,\n \"reasoning\": \"The function takes two references and returns one; the compiler cannot know which input the output borrows from. Explain elision rules briefly.\",\n \"text\": \"Because the function takes two references and returns one, the compiler cannot tell which input the result borrows from. A lifetime annotation is you telling it. With a single reference input it would be inferred automatically.\"\n }\n ]\n }\n ]\n}\n" }, { "path": "content/components/chat/chat-03/app/chat/page.tsx", "type": "registry:page", "target": "app/chat/page.tsx", "content": "'use client';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconLayoutSidebar,\n IconShare,\n} from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Kbd } from '@/components/ui/kbd';\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { ChatSidebar } from '@/components/chat-03/chat-sidebar';\nimport { CommandMenu } from '@/components/chat-03/command-menu';\nimport { type Attachment, Composer } from '@/components/chat-03/composer';\nimport {\n Conversation,\n type Thread,\n type Turn,\n} from '@/components/chat-03/conversation';\nimport { ClaudeLogo, OpenAILogo } from '@/components/chat-03/logos';\nimport data from './data.json' with { type: 'json' };\n\nconst { models, replies } = data;\nconst seed = data.threads as Thread[];\n\nconst logos = { openai: OpenAILogo, anthropic: ClaudeLogo };\nconst Logo = ({ vendor, ...props }: { vendor: string; className?: string }) => {\n const Icon = logos[vendor as keyof typeof logos];\n return ;\n};\n\nconst thinkDelay = 900;\nconst tokenDelay = 40;\n\nexport default function Chat03() {\n const [threads, setThreads] = useState(seed);\n const [activeId, setActiveId] = useState('heat-pump');\n const [draft, setDraft] = useState('');\n const [attachment, setAttachment] = useState(null);\n const [model, setModel] = useState(models[0].name);\n const [search, setSearch] = useState(false);\n const [replyIndex, setReplyIndex] = useState(0);\n const timer = useRef(null);\n\n const thread = threads.find((t) => t.id === activeId) ?? null;\n const streaming = thread?.turns.some((t) => t.streaming) ?? false;\n const altModel = models.find((m) => m.name !== model)?.name ?? model;\n\n const patch = (threadId: string, turnId: string, fn: (t: Turn) => Turn) =>\n setThreads((prev) =>\n prev.map((t) =>\n t.id === threadId\n ? { ...t, turns: t.turns.map((m) => (m.id === turnId ? fn(m) : m)) }\n : t\n )\n );\n\n const stream = (threadId: string, turnId: string) => {\n const reply = replies[replyIndex % replies.length];\n setReplyIndex(replyIndex + 1);\n patch(threadId, turnId, (t) => ({\n ...t,\n text: '',\n reasoning: reply.reasoning,\n thought: undefined,\n error: undefined,\n streaming: true,\n }));\n let shown = 0;\n const tick = () => {\n shown = Math.min(\n reply.text.length,\n shown + 2 + Math.floor(Math.random() * 5)\n );\n const done = shown >= reply.text.length;\n patch(threadId, turnId, (t) => ({\n ...t,\n text: reply.text.slice(0, shown),\n thought: done ? 4 + Math.round(reply.reasoning.length / 40) : t.thought,\n streaming: !done,\n }));\n timer.current = done\n ? null\n : window.setTimeout(tick, tokenDelay * (0.5 + Math.random()));\n };\n tick();\n };\n\n const stop = () => {\n if (timer.current) {\n window.clearTimeout(timer.current);\n timer.current = null;\n }\n const live = thread?.turns.find((t) => t.streaming);\n if (thread && live) {\n patch(thread.id, live.id, (t) => ({\n ...t,\n streaming: false,\n error: true,\n }));\n }\n };\n\n const send = () => {\n const text = draft.trim();\n const replyId = crypto.randomUUID();\n const turns: Turn[] = [\n { id: crypto.randomUUID(), role: 'user', text, day: 'today' },\n {\n id: replyId,\n role: 'assistant',\n text: '',\n streaming: true,\n day: 'today',\n },\n ];\n const id = thread?.id ?? crypto.randomUUID();\n setThreads((prev) =>\n thread\n ? [\n {\n ...thread,\n updated: 'now',\n group: 'today',\n turns: [\n ...thread.turns.map((t) => ({\n ...t,\n day: t.day ?? thread.group,\n })),\n ...turns,\n ],\n },\n ...prev.filter((t) => t.id !== id),\n ]\n : [\n {\n id,\n title: text.split(' ').slice(0, 5).join(' '),\n preview: text,\n updated: 'now',\n group: 'today',\n turns,\n },\n ...prev,\n ]\n );\n setActiveId(id);\n setDraft('');\n setAttachment(null);\n window.setTimeout(() => stream(id, replyId), thinkDelay);\n };\n\n const retry = (turnId: string, next?: string) => {\n if (!thread) {\n return;\n }\n if (next) {\n setModel(next);\n }\n patch(thread.id, turnId, (t) => ({\n ...t,\n text: '',\n thought: undefined,\n error: undefined,\n streaming: true,\n }));\n window.setTimeout(() => stream(thread.id, turnId), thinkDelay);\n };\n\n const edit = (turn: Turn) => {\n if (!thread) {\n return;\n }\n const at = thread.turns.findIndex((t) => t.id === turn.id);\n setThreads((prev) =>\n prev.map((t) =>\n t.id === thread.id ? { ...t, turns: t.turns.slice(0, at) } : t\n )\n );\n setDraft(turn.text);\n };\n\n return (\n \n {\n setThreads(next);\n if (activeId && !next.some((t) => t.id === activeId)) {\n setActiveId(null);\n }\n }}\n onNew={() => setActiveId(null)}\n onSearch={() => setSearch(true)}\n onSelect={setActiveId}\n threads={threads}\n user={data.user}\n />\n \n
\n \n \n \n \n \n }\n >\n m.name === model)?.vendor ?? 'openai'\n }\n />\n {model}\n \n \n \n \n {models.map((m) => (\n setModel(m.name)}\n >\n \n \n \n {m.name}\n \n \n {m.hint}\n \n \n {m.name === model && (\n \n )}\n \n {m.context}\n \n \n ))}\n \n \n \n
\n {thread && (\n \n \n \n )}\n
\n\n !t.pinned).slice(0, 3)}\n thread={thread}\n />\n\n \n \n\n {\n setActiveId(null);\n setDraft(text);\n }}\n onOpen={setActiveId}\n onOpenChange={setSearch}\n open={search}\n threads={threads}\n />\n \n );\n}\n" } ], "categories": [ "chat" ] }, { "name": "command-menu-01", "type": "registry:block", "title": "Command Menu with Groups", "description": "A command menu with groups block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "command", "kbd" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/command-menu/command-menu-01.tsx", "type": "registry:component", "target": "components/command-menu-01.tsx", "content": "'use client';\n\nimport {\n IconBell,\n IconBolt,\n IconCalendar,\n IconChartBar,\n IconChartPie,\n IconClock,\n IconFileText,\n IconHelp,\n IconKeyboard,\n IconLayoutDashboard,\n IconLayoutKanban,\n IconLogout,\n IconMessage,\n IconPalette,\n IconSettings,\n IconSquareCheck,\n IconTarget,\n IconTrendingUp,\n IconUsers,\n} from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '@/components/ui/command';\nimport { Kbd } from '@/components/ui/kbd';\n\nconst workspaceItems = [\n { icon: IconLayoutDashboard, label: 'Dashboard' },\n { icon: IconLayoutKanban, label: 'Projects' },\n { icon: IconSquareCheck, label: 'Tasks' },\n { icon: IconCalendar, label: 'Calendar' },\n { icon: IconUsers, label: 'Team members' },\n { icon: IconMessage, label: 'Messages' },\n { icon: IconFileText, label: 'Documents' },\n { icon: IconBell, label: 'Notifications' },\n { icon: IconClock, label: 'Time tracking' },\n { icon: IconTarget, label: 'Goals' },\n];\n\nconst analyticsItems = [\n { icon: IconChartBar, label: 'Overview' },\n { icon: IconTrendingUp, label: 'Performance' },\n { icon: IconChartPie, label: 'Reports' },\n { icon: IconBolt, label: 'Insights' },\n];\n\nconst settingsItems = [\n { icon: IconSettings, label: 'Preferences' },\n { icon: IconPalette, label: 'Appearance' },\n { icon: IconKeyboard, label: 'Keyboard shortcuts' },\n { icon: IconHelp, label: 'Help & support' },\n { icon: IconLogout, label: 'Sign out' },\n];\n\nexport function CommandMenu01() {\n const [open, setOpen] = useState(true);\n\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n setOpen((prev) => !prev);\n }\n };\n\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, []);\n\n return (\n <>\n \n\n \n \n \n \n No results found.\n \n {workspaceItems.map((item) => (\n \n \n {item.label}\n \n ))}\n \n \n {analyticsItems.map((item) => (\n \n \n {item.label}\n \n ))}\n \n \n {settingsItems.map((item) => (\n \n \n {item.label}\n \n ))}\n \n \n
\n setOpen(false)}\n type=\"button\"\n >\n Close\n Esc\n \n
\n \n \n \n );\n}\n" } ], "categories": [ "command-menu" ] }, { "name": "command-menu-02", "type": "registry:block", "title": "Command Menu with Keyboard Shortcuts", "description": "A command menu with keyboard shortcuts block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "command", "dialog", "kbd" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/command-menu/command-menu-02.tsx", "type": "registry:component", "target": "components/command-menu-02.tsx", "content": "'use client';\n\nimport {\n IconArrowRight,\n IconAt,\n IconCopy,\n IconDeviceDesktop,\n IconDownload,\n IconFile,\n IconFileSearch,\n IconKeyboard,\n IconLink,\n IconLogout,\n IconMessage,\n IconPencil,\n IconPlus,\n IconSend,\n IconSettings,\n IconTemplate,\n IconUser,\n IconUsers,\n} from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandShortcut,\n} from '@/components/ui/command';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport { Kbd, KbdGroup } from '@/components/ui/kbd';\n\nexport function CommandMenu02() {\n const [open, setOpen] = useState(true);\n const [inputValue, setInputValue] = useState('');\n\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n setOpen((prev) => !prev);\n }\n };\n\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, []);\n\n return (\n <>\n \n\n \n \n Command Menu\n \n Use the command menu to navigate through the app.\n \n \n \n \n
\n \n setOpen(false)}\n type=\"button\"\n >\n Esc\n \n
\n\n \n No results found.\n\n \n setOpen(false)}\n >\n \n Account Settings...\n \n \n ⌘\n ,\n \n \n \n setOpen(false)}\n >\n \n Switch Workspace...\n \n setOpen(false)}\n >\n \n Log Out\n \n \n ⌘\n Q\n \n \n \n \n\n \n setOpen(false)}\n >\n \n Search Documents...\n \n \n ⌘\n F\n \n \n \n setOpen(false)}\n >\n \n Create New Document...\n \n \n ⌘\n N\n \n \n \n setOpen(false)}\n >\n \n Upload Document...\n \n \n ⌘\n U\n \n \n \n \n\n \n setOpen(false)}\n >\n \n Request Signature...\n \n setOpen(false)}\n >\n \n Sign a Document...\n \n setOpen(false)}\n >\n \n Bulk Send for Signature...\n \n \n\n \n setOpen(false)}\n >\n \n Search Templates...\n \n setOpen(false)}\n >\n \n Create New Template...\n \n \n\n \n setOpen(false)}\n >\n \n Change Theme...\n \n \n ⌘\n T\n \n \n \n setOpen(false)}\n >\n \n Copy Current URL\n \n \n ⌘\n ⇧\n C\n \n \n \n \n\n \n setOpen(false)}\n >\n \n \n Go to Inbox\n \n \n setOpen(false)}\n >\n \n \n Go to \n Action Required\n \n \n setOpen(false)}\n >\n \n \n Go to \n \n Waiting for Others\n \n \n \n setOpen(false)}\n >\n \n \n Go to \n Completed\n \n \n setOpen(false)}\n >\n \n \n Go to Drafts\n \n \n setOpen(false)}\n >\n \n \n Go to \n Templates\n \n \n setOpen(false)}\n >\n \n \n Go to \n Archive\n \n \n setOpen(false)}\n >\n \n \n Go to Trash\n \n \n setOpen(false)}\n >\n \n \n Go to \n Settings\n \n \n \n\n \n setOpen(false)}\n >\n \n Copy Signing Link\n \n setOpen(false)}\n >\n \n Download Document\n \n \n\n \n setOpen(false)}\n >\n \n Search Help Center...\n \n setOpen(false)}\n >\n \n Send Feedback...\n \n setOpen(false)}\n >\n \n Contact Support\n \n \n\n \n setOpen(false)}\n >\n \n View Keyboard Shortcuts\n \n \n ⌘\n /\n \n \n \n \n \n \n \n \n \n );\n}\n" } ], "categories": [ "command-menu" ] }, { "name": "command-menu-03", "type": "registry:block", "title": "Command Menu with Documentation Search", "description": "A command menu with documentation search block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "command", "dialog", "kbd" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/command-menu/command-menu-03.tsx", "type": "registry:component", "target": "components/command-menu-03.tsx", "content": "'use client';\n\nimport { IconArrowRight, IconCornerDownLeft } from '@tabler/icons-react';\nimport { useRouter } from 'next/navigation';\nimport { useCallback, useEffect, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandShortcut,\n} from '@/components/ui/command';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport { Kbd } from '@/components/ui/kbd';\n\nconst navItems = [\n { href: '/', label: 'Home', keywords: ['home', 'main', 'index'] },\n {\n href: '/dashboard',\n label: 'Dashboard',\n keywords: ['dashboard', 'overview'],\n },\n {\n href: '/settings',\n label: 'Settings',\n keywords: ['settings', 'preferences'],\n },\n];\n\nconst pageGroups = [\n {\n name: 'Getting Started',\n pages: [\n {\n name: 'Introduction',\n href: '/docs/introduction',\n keywords: ['intro', 'start'],\n },\n {\n name: 'Installation',\n href: '/docs/installation',\n keywords: ['install', 'setup'],\n },\n {\n name: 'Quick Start',\n href: '/docs/quick-start',\n keywords: ['quick', 'begin'],\n },\n ],\n },\n {\n name: 'Utilities',\n pages: [\n {\n name: 'Typography',\n href: '/docs/utilities/typography',\n keywords: ['text', 'font'],\n },\n {\n name: 'Colors',\n href: '/docs/utilities/colors',\n keywords: ['color', 'theme'],\n },\n {\n name: 'Spacing',\n href: '/docs/utilities/spacing',\n keywords: ['margin', 'padding'],\n },\n ],\n },\n];\n\nconst colorGroups = [\n {\n name: 'Neutral',\n colors: [\n {\n name: 'Neutral 50',\n className: 'neutral-50',\n value: 'oklch(0.985 0 0)',\n },\n {\n name: 'Neutral 100',\n className: 'neutral-100',\n value: 'oklch(0.97 0 0)',\n },\n {\n name: 'Neutral 200',\n className: 'neutral-200',\n value: 'oklch(0.922 0 0)',\n },\n {\n name: 'Neutral 500',\n className: 'neutral-500',\n value: 'oklch(0.556 0 0)',\n },\n {\n name: 'Neutral 900',\n className: 'neutral-900',\n value: 'oklch(0.205 0 0)',\n },\n ],\n },\n {\n name: 'Blue',\n colors: [\n {\n name: 'Blue 50',\n className: 'blue-50',\n value: 'oklch(0.97 0.014 254.604)',\n },\n {\n name: 'Blue 500',\n className: 'blue-500',\n value: 'oklch(0.623 0.214 259.815)',\n },\n {\n name: 'Blue 600',\n className: 'blue-600',\n value: 'oklch(0.546 0.245 262.881)',\n },\n ],\n },\n];\n\nexport function CommandMenu03() {\n const router = useRouter();\n const [open, setOpen] = useState(true);\n\n const copyToClipboard = useCallback((text: string) => {\n navigator.clipboard.writeText(text);\n }, []);\n\n const runCommand = useCallback((command: () => unknown) => {\n setOpen(false);\n command();\n }, []);\n\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {\n if (\n (e.target instanceof HTMLElement && e.target.isContentEditable) ||\n e.target instanceof HTMLInputElement ||\n e.target instanceof HTMLTextAreaElement ||\n e.target instanceof HTMLSelectElement\n ) {\n return;\n }\n e.preventDefault();\n setOpen((prev) => !prev);\n }\n };\n\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, []);\n\n return (\n <>\n \n\n \n \n \n Search documentation...\n \n Search for a command to run...\n \n \n\n \n \n \n \n No results found.\n \n\n {navItems.length > 0 && (\n \n {navItems.map((item) => (\n {\n runCommand(() => router.push(item.href));\n }}\n value={`Navigation ${item.label}`}\n >\n \n {item.label}\n \n ))}\n \n )}\n\n {pageGroups.map((group) => (\n \n {group.pages.map((page) => {\n const isComponent = page.href.includes('/components/');\n return (\n {\n runCommand(() => router.push(page.href));\n }}\n value={`${group.name} ${page.name}`}\n >\n {isComponent ? (\n
\n ) : (\n \n )}\n {page.name}\n \n );\n })}\n \n ))}\n\n {colorGroups.map((colorGroup) => (\n \n {colorGroup.colors.map((color) => (\n {\n runCommand(() => copyToClipboard(color.value));\n }}\n value={color.className}\n >\n \n {color.className}\n \n {color.value}\n \n \n ))}\n \n ))}\n \n \n\n
\n \n \n \n Select\n
\n \n
\n \n );\n}\n" } ], "categories": [ "command-menu" ] }, { "name": "command-menu-04", "type": "registry:block", "title": "Command Menu with Global Search", "description": "A command menu with global search block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "command" ], "dependencies": [ "@tabler/icons-react", "cmdk" ], "files": [ { "path": "content/components/command-menu/command-menu-04.tsx", "type": "registry:component", "target": "components/command-menu-04.tsx", "content": "'use client';\n\nimport {\n IconFileText,\n IconFileTypeDocx,\n IconFileTypePdf,\n IconFileTypeXls,\n IconFileZip,\n IconFolder,\n IconMessageCircle,\n IconPhoto,\n IconX,\n} from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { type ComponentType, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandList,\n} from '@/components/ui/command';\nimport { cn } from '@/lib/utils';\n\nexport type SearchResultKind = 'chat' | 'image' | 'document' | 'project';\n\nexport type SearchResult = {\n id: string;\n kind: SearchResultKind;\n title: string;\n /** Shown under the title while searching. Chats use a text excerpt; files use their type. */\n snippet: string;\n date: string;\n /** Images only: CSS background for the thumbnail. */\n thumbnail?: string;\n};\n\ntype Filter = 'all' | SearchResultKind;\n\nconst filters: { value: Filter; label: string }[] = [\n { value: 'all', label: 'All' },\n { value: 'chat', label: 'Chats' },\n { value: 'image', label: 'Images' },\n { value: 'document', label: 'Documents' },\n { value: 'project', label: 'Projects' },\n];\n\nconst fileIcons: Record> = {\n pdf: IconFileTypePdf,\n docx: IconFileTypeDocx,\n xlsx: IconFileTypeXls,\n zip: IconFileZip,\n};\n\nconst kindIcons: Record<\n SearchResultKind,\n ComponentType<{ className?: string }>\n> = {\n chat: IconMessageCircle,\n image: IconPhoto,\n document: IconFileText,\n project: IconFolder,\n};\n\nconst lastOpenedChats: SearchResult[] = [\n {\n id: 'c1',\n kind: 'chat',\n title: 'Q3 launch checklist',\n snippet: 'Pin the launch date once legal signs off on the new terms.',\n date: 'Today',\n },\n {\n id: 'c2',\n kind: 'chat',\n title: 'Draft onboarding email sequence',\n snippet:\n 'Three emails over five days, starting the morning after launch, each with one clear action.',\n date: 'Today',\n },\n];\n\nconst recentChats: SearchResult[] = [\n {\n id: 'c3',\n kind: 'chat',\n title: 'Compare pricing page layouts',\n snippet:\n 'Three-column pricing works when the middle tier is the one most people should pick. Ship it with the launch.',\n date: 'Yesterday',\n },\n {\n id: 'c4',\n kind: 'chat',\n title: 'Summarize customer interviews',\n snippet:\n 'Eight of twelve customers mentioned invoice export first. Nobody brought up the dashboard redesign.',\n date: 'Yesterday',\n },\n {\n id: 'c5',\n kind: 'chat',\n title: 'Fix flaky checkout test',\n snippet:\n 'The test races the payment webhook. Wait for the order status instead of a fixed delay.',\n date: 'Sep 4',\n },\n {\n id: 'c6',\n kind: 'chat',\n title: 'Write release notes for v2.4',\n snippet:\n 'Lead with the two launch features people asked for most, then list fixes in one short block.',\n date: 'Sep 2',\n },\n {\n id: 'c7',\n kind: 'chat',\n title: 'Plan database index cleanup',\n snippet:\n 'Drop the four unused indexes on orders first; they cost the most on writes.',\n date: 'Aug 30',\n },\n {\n id: 'c8',\n kind: 'chat',\n title: 'Brainstorm team offsite agenda',\n snippet:\n 'Half a day on the roadmap, half a day on the launch retro, evening free.',\n date: 'Aug 28',\n },\n {\n id: 'c9',\n kind: 'chat',\n title: 'Review API rate limit options',\n snippet:\n 'Token bucket per API key, 600 requests a minute. Raise the ceiling for launch week.',\n date: 'Aug 26',\n },\n];\n\nconst images: SearchResult[] = [\n {\n id: 'i1',\n kind: 'image',\n title: 'launch-hero-banner.png',\n snippet: 'Image',\n date: 'Sep 3',\n thumbnail: 'linear-gradient(135deg, #f97316, #db2777)',\n },\n {\n id: 'i2',\n kind: 'image',\n title: 'launch-pricing-table.png',\n snippet: 'Image',\n date: 'Aug 20',\n thumbnail: 'linear-gradient(135deg, #0ea5e9, #6366f1)',\n },\n {\n id: 'i3',\n kind: 'image',\n title: 'launch-onboarding-flow.png',\n snippet: 'Image',\n date: 'Aug 27',\n thumbnail: 'linear-gradient(135deg, #22c55e, #0d9488)',\n },\n {\n id: 'i4',\n kind: 'image',\n title: 'dashboard-dark-mode.png',\n snippet: 'Image',\n date: 'Aug 15',\n thumbnail: 'linear-gradient(135deg, #1e293b, #475569)',\n },\n {\n id: 'i5',\n kind: 'image',\n title: 'launch-social-card.jpg',\n snippet: 'Image',\n date: 'Aug 12',\n thumbnail: 'linear-gradient(135deg, #a855f7, #f43f5e)',\n },\n {\n id: 'i6',\n kind: 'image',\n title: 'checkout-error-states.png',\n snippet: 'Image',\n date: 'Jul 30',\n thumbnail: 'linear-gradient(135deg, #eab308, #f97316)',\n },\n];\n\nconst documents: SearchResult[] = [\n {\n id: 'd1',\n kind: 'document',\n title: 'Q3_launch_plan.pdf',\n snippet: 'PDF',\n date: 'Sep 1',\n },\n {\n id: 'd2',\n kind: 'document',\n title: 'launch-pricing-proposal.docx',\n snippet: 'Document',\n date: 'Aug 22',\n },\n {\n id: 'd3',\n kind: 'document',\n title: 'pre-launch-interview-notes.md',\n snippet: 'Document',\n date: 'Aug 19',\n },\n {\n id: 'd4',\n kind: 'document',\n title: 'launch-assets-final.zip',\n snippet: 'File',\n date: 'Aug 11',\n },\n {\n id: 'd5',\n kind: 'document',\n title: 'pricing-experiments.xlsx',\n snippet: 'Spreadsheet',\n date: 'Aug 14',\n },\n];\n\nconst projects: SearchResult[] = [\n {\n id: 'p1',\n kind: 'project',\n title: 'Q3 product launch',\n snippet: 'Project',\n date: 'Sep 5',\n },\n {\n id: 'p2',\n kind: 'project',\n title: 'Launch pricing and packaging',\n snippet: 'Project',\n date: 'Aug 30',\n },\n {\n id: 'p3',\n kind: 'project',\n title: 'Post-launch onboarding redesign',\n snippet: 'Project',\n date: 'Aug 21',\n },\n {\n id: 'p4',\n kind: 'project',\n title: 'Checkout reliability',\n snippet: 'Project',\n date: 'Jul 28',\n },\n];\n\nconst searchResults: SearchResult[] = [\n ...lastOpenedChats,\n ...recentChats,\n ...images,\n ...documents,\n ...projects,\n];\n\nexport function CommandMenu04() {\n const [open, setOpen] = useState(true);\n\n return (\n <>\n \n\n setOpen(false)}\n open={open}\n recent={recentChats}\n results={searchResults}\n />\n \n );\n}\n\nexport function GlobalSearch({\n open,\n onOpenChange,\n onSelect,\n lastOpened,\n recent,\n results,\n}: {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onSelect: (result: SearchResult) => void;\n lastOpened: SearchResult[];\n recent: SearchResult[];\n results: SearchResult[];\n}) {\n const [query, setQuery] = useState('');\n const [filter, setFilter] = useState('all');\n const needle = query.trim().toLowerCase();\n\n const matches = results.filter(\n (result) =>\n (filter === 'all' || result.kind === filter) &&\n `${result.title} ${result.snippet}`.toLowerCase().includes(needle)\n );\n\n const reset = () => {\n setQuery('');\n setFilter('all');\n };\n\n return (\n {\n if (!next) {\n reset();\n }\n onOpenChange(next);\n }}\n open={open}\n title=\"Global search\"\n >\n \n
\n \n
\n {query && (\n <>\n \n Clear\n \n \n \n )}\n onOpenChange(false)}\n type=\"button\"\n >\n \n \n
\n
\n\n \n {needle ? (\n <>\n \n {filters.map((option) => {\n const selected = option.value === filter;\n return (\n setFilter(option.value)}\n role=\"tab\"\n type=\"button\"\n >\n {option.label}\n \n );\n })}\n
\n No results for “{query}”.\n {filter === 'image' ? (\n
\n {matches.map((result) => (\n onSelect(result)}\n value={result.id}\n >\n \n \n ))}\n
\n ) : (\n matches.map((result) => (\n \n ))\n )}\n \n ) : (\n <>\n \n {lastOpened.map((result) => (\n \n ))}\n \n \n {recent.map((result) => (\n \n ))}\n \n \n )}\n \n \n \n );\n}\n\nfunction ResultRow({\n result,\n needle,\n onSelect,\n}: {\n result: SearchResult;\n needle?: string;\n onSelect: (result: SearchResult) => void;\n}) {\n const extension = result.title.split('.').pop() ?? '';\n const Icon =\n result.kind === 'document'\n ? (fileIcons[extension] ?? IconFileText)\n : kindIcons[result.kind];\n\n return (\n onSelect(result)}\n value={result.id}\n >\n \n \n \n \n \n \n \n {needle && (\n \n \n \n )}\n \n {needle && (\n \n {result.date}\n \n )}\n \n );\n}\n\nfunction Highlight({ text, needle }: { text: string; needle?: string }) {\n const start = needle ? text.toLowerCase().indexOf(needle) : -1;\n if (!needle || start === -1) {\n return text;\n }\n const end = start + needle.length;\n return (\n <>\n {text.slice(0, start)}\n \n {text.slice(start, end)}\n \n {text.slice(end)}\n \n );\n}\n" } ], "categories": [ "command-menu" ] }, { "name": "dashboard-01", "type": "registry:block", "title": "Dashboard with Revenue and Customers", "description": "A dashboard with revenue and customers block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "chart", "dialog", "dropdown-menu", "field", "input", "input-group", "popover", "progress", "separator", "sidebar", "table", "toggle-group" ], "dependencies": [ "date-fns", "lucide-react", "recharts" ], "files": [ { "path": "content/components/dashboard/dashboard-01/dashboard-header.tsx", "type": "registry:component", "target": "components/dashboard-01/dashboard-header.tsx", "content": "'use client';\n\nimport { format, parseISO } from 'date-fns';\nimport {\n Bell,\n CalendarDays,\n ChartNoAxesCombined,\n ChevronDown,\n LockKeyhole,\n LogOut,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n UserRound,\n} from 'lucide-react';\nimport { type ComponentProps, useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Field, FieldGroup, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverTitle,\n PopoverTrigger,\n} from '@/components/ui/popover';\nimport { Separator } from '@/components/ui/separator';\nimport { useSidebar } from '@/components/ui/sidebar';\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';\nimport { cn } from '@/lib/utils';\nimport type { DashboardCharts } from '@/components/dashboard-01/dashboard-charts';\n\ntype ChartOptions = ComponentProps;\ntype DateRange = Pick;\n\nconst press =\n 'ease-[cubic-bezier(0.23,1,0.32,1)] transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100';\n\nexport function DashboardHeader({\n period,\n range,\n onPeriodChange,\n onRangeChange,\n}: {\n period: ChartOptions['period'];\n range: DateRange;\n onPeriodChange: (period: ChartOptions['period']) => void;\n onRangeChange: (range: DateRange) => void;\n}) {\n const { isMobile, openMobile, state, toggleSidebar } = useSidebar();\n const sidebarOpen = isMobile ? openMobile : state === 'expanded';\n const [customRange, setCustomRange] = useState(null);\n const [unread, setUnread] = useState(true);\n const [notificationsOpen, setNotificationsOpen] = useState(false);\n const from = parseISO(range.from);\n const to = parseISO(range.to);\n const rangeLabel =\n range.from === range.to\n ? format(to, 'd MMM')\n : `${format(from, from.getMonth() === to.getMonth() && from.getFullYear() === to.getFullYear() ? 'd' : 'd MMM')} – ${format(to, 'd MMM')}`;\n\n return (\n <>\n
\n
\n \n {sidebarOpen ? (\n \n ) : (\n \n )}\n \n

Overview

\n

\n Updated 2 min ago\n

\n
\n
\n {\n const next = periods.find((item) => item.value === values[0]);\n if (!next) {\n return;\n }\n onPeriodChange(next.value);\n onRangeChange({ from: next.from, to: '2025-11-16' });\n }}\n size=\"sm\"\n spacing={0.5}\n value={[period]}\n >\n {periods.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n }\n >\n \n {rangeLabel}\n \n \n \n \n Date range\n \n {\n const next = ranges.find((item) => item.from === value);\n if (next) {\n onRangeChange({ from: next.from, to: '2025-11-16' });\n }\n }}\n value={range.to === '2025-11-16' ? range.from : ''}\n >\n {ranges.map((item) => (\n \n {item.label}\n \n ))}\n \n \n \n \n setCustomRange(range)}\n >\n Custom range…\n \n \n \n \n \n document.documentElement.classList.toggle('dark')}\n size=\"icon-lg\"\n title=\"Toggle dark mode (Shift+D)\"\n type=\"button\"\n variant=\"ghost\"\n >\n \n \n \n \n \n }\n >\n \n {unread && (\n \n )}\n \n \n
\n Notifications\n
\n {unread ? '2 unread' : 'All read'}\n
\n \n Recent workspace activity.\n \n
\n setNotificationsOpen(false)}\n render={\n \n
\n \n
\n
\n
\n Weekly report\n \n
\n

\n 10–16 Nov · $42,910 in revenue\n

\n

\n 3,482 charges processed\n

\n
\n \n \n }\n variant=\"ghost\"\n />\n \n setNotificationsOpen(false)}\n render={\n \n \n \n PR\n \n
\n
\n \n Priya Raman signed up\n \n \n
\n

\n Joined Lumen Labs on the Pro plan.\n

\n
\n \n \n }\n variant=\"ghost\"\n />\n
\n setUnread(false)}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Mark all as read\n \n
\n \n \n \n \n }\n >\n \n \n EB\n \n \n \n \n \n \n \n
\n Ephraim Brooks\n
\n
\n ephraim@lumenlabs.io\n
\n \n \n \n \n \n \n Profile\n \n }\n />\n \n \n Notifications\n \n }\n />\n \n \n Security\n \n }\n />\n \n \n \n \n \n Log out\n \n }\n variant=\"destructive\"\n />\n \n \n \n
\n
\n {\n if (!open) {\n setCustomRange(null);\n }\n }}\n open={customRange !== null}\n >\n \n {customRange && (\n {\n event.preventDefault();\n if (\n customRange.from &&\n customRange.to &&\n customRange.from <= customRange.to\n ) {\n onRangeChange(customRange);\n setCustomRange(null);\n }\n }}\n >\n \n Custom date range\n \n Choose the dates to include in your charts.\n \n \n \n \n Start date\n \n setCustomRange({\n ...customRange,\n from: event.target.value,\n })\n }\n required\n type=\"date\"\n value={customRange.from}\n />\n \n \n End date\n \n setCustomRange({ ...customRange, to: event.target.value })\n }\n required\n type=\"date\"\n value={customRange.to}\n />\n \n \n \n setCustomRange(null)}\n type=\"button\"\n variant=\"outline\"\n >\n Cancel\n \n \n \n \n )}\n \n \n \n );\n}\n\nconst periods = [\n { label: 'Day', value: 'day', from: '2025-11-16' },\n { label: 'Week', value: 'week', from: '2025-11-10' },\n { label: 'Month', value: 'month', from: '2025-10-18' },\n { label: 'Year', value: 'year', from: '2025-01-01' },\n] as const;\n\nconst ranges = [\n { label: 'Last 7 days', from: '2025-11-10' },\n { label: 'Last 14 days', from: '2025-11-03' },\n { label: 'Last 30 days', from: '2025-10-18' },\n { label: 'This quarter', from: '2025-10-01' },\n { label: 'Year to date', from: '2025-01-01' },\n];\n" }, { "path": "content/components/dashboard/dashboard-01/dashboard-sidebar.tsx", "type": "registry:component", "target": "components/dashboard-01/dashboard-sidebar.tsx", "content": "'use client';\n\nimport {\n ArrowLeftRight,\n BriefcaseBusiness,\n ChartNoAxesCombined,\n Check,\n ChevronDown,\n CircleHelp,\n CirclePlus,\n CreditCard,\n LayoutDashboard,\n Moon,\n Settings,\n Users,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Field, FieldGroup, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { Progress } from '@/components/ui/progress';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\n\nexport function DashboardSidebar() {\n const { isMobile, setOpenMobile, state } = useSidebar();\n const [workspaces, setWorkspaces] = useState([\n 'Lumen Labs',\n 'Halcyon Studio',\n 'Pinecrest Co.',\n ]);\n const [workspace, setWorkspace] = useState('Lumen Labs');\n const [creating, setCreating] = useState(false);\n const [name, setName] = useState('');\n\n return (\n <>\n \n \n \n \n \n \n }\n >\n \n {workspace.slice(0, 1)}\n \n \n {workspace}\n \n \n \n \n \n \n Workspaces\n \n {workspaces.map((item, index) => (\n setWorkspace(item)}\n >\n \n {item.slice(0, 1)}\n \n {item}\n {item === workspace && }\n \n ))}\n \n \n \n setCreating(true)}\n >\n \n Create workspace\n \n \n \n \n \n \n \n \n \n \n WORKSPACE\n \n \n {navigation.map((item) => (\n \n setOpenMobile(false)}\n render={\n \n \n \n {item.label}\n \n {item.label === 'Customers' && (\n
\n 12\n
\n )}\n \n }\n tooltip={item.label}\n />\n \n ))}\n \n \n \n \n \n \n \n \n }\n >\n \n \n Settings\n \n \n \n \n \n \n Company profile\n \n }\n />\n \n \n Team\n \n }\n />\n \n \n Billing\n \n }\n />\n \n document.documentElement.classList.toggle('dark')\n }\n >\n \n Appearance\n
\n Light\n Dark\n
\n \n \n \n \n \n \n \n \n \n Help & support\n \n \n }\n tooltip=\"Help and support\"\n />\n \n \n
\n
\n Monthly volume\n
\n 72%\n
\n
\n \n

\n $72,400 of $100,000 used\n

\n
\n \n \n \n \n {\n event.preventDefault();\n const nextName = name.trim();\n if (!nextName) {\n return;\n }\n if (!workspaces.includes(nextName)) {\n setWorkspaces([...workspaces, nextName]);\n }\n setWorkspace(nextName);\n setName('');\n setCreating(false);\n }}\n >\n \n Create workspace\n \n Add a workspace to this dashboard preview.\n \n \n \n \n Workspace name\n setName(event.target.value)}\n pattern=\".*\\S.*\"\n required\n value={name}\n />\n \n \n \n setCreating(false)}\n type=\"button\"\n variant=\"outline\"\n >\n Cancel\n \n \n \n \n \n \n \n );\n}\n\nconst navigation = [\n { label: 'Overview', href: '#overview', icon: LayoutDashboard },\n { label: 'Customers', href: '#customers', icon: Users },\n { label: 'Transactions', href: '/transactions', icon: ArrowLeftRight },\n { label: 'Payouts', href: '/payouts', icon: CreditCard },\n { label: 'Reports', href: '#revenue', icon: ChartNoAxesCombined },\n];\n" }, { "path": "content/components/dashboard/dashboard-01/customers-table.tsx", "type": "registry:component", "target": "components/dashboard-01/customers-table.tsx", "content": "'use client';\n\nimport {\n DownloadIcon,\n EllipsisIcon,\n EyeIcon,\n FunnelIcon,\n MailIcon,\n SearchIcon,\n XIcon,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n InputGroupText,\n} from '@/components/ui/input-group';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`;\n\nexport function CustomersTable() {\n const [query, setQuery] = useState('');\n const [selected, setSelected] = useState>({\n Plan: [],\n Status: [],\n });\n const [page, setPage] = useState(1);\n const [customer, setCustomer] = useState(null);\n\n const bindSearch = (node: HTMLInputElement | null) => {\n if (!node) {\n return;\n }\n\n const focusSearch = (event: KeyboardEvent) => {\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n event.preventDefault();\n node.focus();\n }\n };\n window.addEventListener('keydown', focusSearch);\n return () => window.removeEventListener('keydown', focusSearch);\n };\n\n const term = query.trim().toLocaleLowerCase();\n const filtered = customers.filter(\n (item) =>\n (!term ||\n item.name.toLocaleLowerCase().includes(term) ||\n item.email.toLocaleLowerCase().includes(term)) &&\n (!selected.Plan.length || selected.Plan.includes(item.plan)) &&\n (!selected.Status.length || selected.Status.includes(item.status))\n );\n\n const pageCount = Math.max(1, Math.ceil(filtered.length / 9));\n const visibleCustomers = filtered.slice((page - 1) * 9, page * 9);\n const filterCount = selected.Plan.length + selected.Status.length;\n const toggle = (facet: Facet, option: string) => {\n setSelected((current) => ({\n ...current,\n [facet]: current[facet].includes(option)\n ? current[facet].filter((item) => item !== option)\n : [...current[facet], option],\n }));\n setPage(1);\n };\n const clear = (facet?: Facet) => {\n setSelected((current) =>\n facet ? { ...current, [facet]: [] } : { Plan: [], Status: [] }\n );\n setPage(1);\n };\n\n const exportCustomers = () => {\n const csv = [\n ['Customer', 'Email', 'Signed up', 'Plan', 'Status'],\n ...filtered.map((item) => [\n item.name,\n item.email,\n item.signedUp,\n item.plan,\n item.status,\n ]),\n ]\n .map((row) =>\n row.map((value) => `\"${value.replaceAll('\"', '\"\"')}\"`).join(',')\n )\n .join('\\n');\n const url = URL.createObjectURL(\n new Blob([csv], { type: 'text/csv;charset=utf-8' })\n );\n const link = document.createElement('a');\n link.href = url;\n link.download = 'customers.csv';\n link.click();\n URL.revokeObjectURL(url);\n };\n\n return (\n
\n
\n
\n

New customers

\n

\n Recent signups across all plans\n

\n
\n
\n {filterCount > 0 && (\n \n {facets.map(\n (facet) =>\n selected[facet].length > 0 && (\n \n \n \n }\n >\n \n {facet}:\n \n \n {selected[facet].join(', ')}\n \n \n \n \n {options[facet].map((option) => (\n toggle(facet, option)}\n >\n {option}\n \n ))}\n \n \n \n clear(facet)}\n type=\"button\"\n >\n \n \n
\n )\n )}\n clear()}\n size=\"sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n Clear all\n \n \n )}\n \n \n \n \n \n \n \n {\n setQuery(event.target.value);\n setPage(1);\n }}\n placeholder=\"Search customers\"\n ref={bindSearch}\n type=\"search\"\n value={query}\n />\n \n \n ⌘K\n \n \n \n
\n \n \n }\n >\n \n Filter{filterCount ? ` (${filterCount})` : ''}\n \n \n {facets.map((facet, index) => (\n \n {index > 0 && }\n {facet}\n {options[facet].map((option) => (\n toggle(facet, option)}\n >\n {option}\n \n ))}\n \n ))}\n {filterCount > 0 && (\n <>\n \n \n clear()}>\n Clear filters\n \n \n \n )}\n \n \n \n \n Export\n \n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n Customer\n \n \n Email\n \n \n Signed up\n \n \n Plan\n \n \n Status\n \n \n Actions\n \n \n \n \n {visibleCustomers.map((item) => (\n \n \n {item.name}\n \n \n {item.email}\n \n \n {item.signedUp}\n \n {item.plan}\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n
\n {item.name}\n
\n
\n {item.email}\n
\n \n \n \n \n setCustomer(item)}\n >\n \n View customer\n \n \n \n Send email\n \n }\n />\n \n \n \n \n \n ))}\n {!visibleCustomers.length && (\n \n \n No customers match your search and filters.\n \n \n )}\n \n
\n
\n\n
\n

\n {filtered.length\n ? `${(page - 1) * 9 + 1}–${Math.min(page * 9, filtered.length)} of ${filtered.length} customers`\n : '0 customers'}\n

\n \n
\n\n {\n if (!open) {\n setCustomer(null);\n }\n }}\n open={customer !== null}\n >\n \n {customer && (\n <>\n \n {customer.name}\n \n Customer details and signup information.\n \n \n
\n
Email
\n
{customer.email}
\n
Signed up
\n
{customer.signedUp}
\n
Plan
\n
{customer.plan}
\n
Status
\n
\n \n
\n
\n \n \n \n Contact customer\n \n }\n />\n \n \n )}\n \n \n \n );\n}\n\nfunction StatusDot({ status }: { readonly status: Status }) {\n return (\n \n \n {status}\n \n );\n}\n\ntype Plan = 'Starter' | 'Pro' | 'Team';\ntype Status = 'Active' | 'Pending' | 'Under review' | 'Rejected' | 'Inactive';\n\ntype Customer = {\n readonly name: string;\n readonly email: string;\n readonly signedUp: string;\n readonly plan: Plan;\n readonly status: Status;\n};\n\nconst customers: readonly Customer[] = [\n {\n name: 'Priya Raman',\n email: 'priya.raman@lumenlabs.io',\n signedUp: 'Today, 9:12 AM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Daniel Okafor',\n email: 'd.okafor@fastmail.com',\n signedUp: 'Today, 8:40 AM',\n plan: 'Starter',\n status: 'Pending',\n },\n {\n name: 'Mei Lin Chen',\n email: 'meilin@outlook.com',\n signedUp: 'Yesterday, 6:05 PM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Tomás Herrera',\n email: 'tomas.h@gmail.com',\n signedUp: 'Yesterday, 2:31 PM',\n plan: 'Pro',\n status: 'Under review',\n },\n {\n name: 'Aisha Bello',\n email: 'aisha.bello@proton.me',\n signedUp: '11 Nov, 4:18 PM',\n plan: 'Starter',\n status: 'Rejected',\n },\n {\n name: 'Lucas Moreau',\n email: 'l.moreau@yahoo.fr',\n signedUp: '11 Nov, 11:02 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Hannah Weiss',\n email: 'hannah.w@gmail.com',\n signedUp: '10 Nov, 7:44 PM',\n plan: 'Pro',\n status: 'Pending',\n },\n {\n name: 'Kenji Sato',\n email: 'kenji.sato@icloud.com',\n signedUp: '10 Nov, 3:15 PM',\n plan: 'Starter',\n status: 'Inactive',\n },\n {\n name: 'Olivia Brooks',\n email: 'olivia@brooks.studio',\n signedUp: '9 Nov, 10:27 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Sofia Alvarez',\n email: 'sofia@northstar.co',\n signedUp: '9 Nov, 8:16 AM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Marcus Johnson',\n email: 'marcus.j@hey.com',\n signedUp: '8 Nov, 5:42 PM',\n plan: 'Team',\n status: 'Under review',\n },\n {\n name: 'Elena Petrova',\n email: 'elena@kinetic.design',\n signedUp: '8 Nov, 1:20 PM',\n plan: 'Starter',\n status: 'Pending',\n },\n {\n name: 'Noah Williams',\n email: 'noah@fieldnotes.app',\n signedUp: '7 Nov, 4:55 PM',\n plan: 'Pro',\n status: 'Active',\n },\n {\n name: 'Fatima Zahra',\n email: 'fatima.z@proton.me',\n signedUp: '7 Nov, 11:09 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Ethan Park',\n email: 'ethan.park@icloud.com',\n signedUp: '6 Nov, 6:33 PM',\n plan: 'Starter',\n status: 'Inactive',\n },\n {\n name: 'Amara Nwosu',\n email: 'amara@woven.studio',\n signedUp: '6 Nov, 2:08 PM',\n plan: 'Pro',\n status: 'Rejected',\n },\n {\n name: 'Gabriel Silva',\n email: 'gabriel@orbit.dev',\n signedUp: '5 Nov, 9:47 AM',\n plan: 'Team',\n status: 'Active',\n },\n {\n name: 'Leila Haddad',\n email: 'leila.h@fastmail.com',\n signedUp: '4 Nov, 3:26 PM',\n plan: 'Starter',\n status: 'Pending',\n },\n];\n\ntype Facet = 'Plan' | 'Status';\nconst facets: readonly Facet[] = ['Plan', 'Status'];\nconst options: Record = {\n Plan: ['Starter', 'Pro', 'Team'],\n Status: ['Active', 'Pending', 'Under review', 'Rejected', 'Inactive'],\n};\n\nconst statusDots: Record = {\n Active: 'bg-green-500',\n Pending: 'bg-amber-500',\n 'Under review': 'bg-blue-500',\n Rejected: 'bg-red-500',\n Inactive: 'bg-muted-foreground/40',\n};\n" }, { "path": "content/components/dashboard/dashboard-01/dashboard-charts.tsx", "type": "registry:component", "target": "components/dashboard-01/dashboard-charts.tsx", "content": "'use client';\n\nimport { format, parseISO } from 'date-fns';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n XAxis,\n YAxis,\n} from 'recharts';\nimport {\n type ChartConfig,\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n} from '@/components/ui/chart';\nimport { cn } from '@/lib/utils';\n\nconst swap =\n 'ease-[cubic-bezier(0.23,1,0.32,1)] fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150';\n\nexport function DashboardCharts({\n period,\n from,\n to,\n}: {\n period: 'day' | 'week' | 'month' | 'year';\n from: string;\n to: string;\n}) {\n const hourly = from === to;\n const start = days.findIndex((day) => day.date >= from);\n const current = days.filter((day) => day.date >= from && day.date <= to);\n const prior = days.slice(start - current.length, start);\n const data = hourly\n ? hours(current[0], prior[0])\n : current.map((day, index) => ({\n date: day.date,\n revenue: day.revenue,\n priorRevenue: prior[index]?.revenue ?? 0,\n charges: day.charges,\n priorCharges: prior[index]?.charges ?? 0,\n }));\n const tickStep = Math.max(1, Math.ceil(data.length / 7));\n const ticks = data\n .filter((_, index) => index % tickStep === 0)\n .map((row) => row.date);\n const tickFormat = hourly ? 'ha' : data.length > 90 ? 'MMM' : 'd MMM';\n const labelFormat = hourly ? 'EEE, d MMM, ha' : 'EEE, d MMM yyyy';\n\n return (\n
\n
\n {panels.map((panel) => {\n const total = data.reduce((sum, row) => sum + row[panel.current], 0);\n const previous = data.reduce(\n (sum, row) => sum + row[panel.previous],\n 0\n );\n const change = previous ? ((total - previous) / previous) * 100 : 0;\n const config = {\n [panel.current]: {\n label: `This ${period}`,\n color: 'var(--chart-1)',\n },\n [panel.previous]: {\n label: `Last ${period}`,\n color: 'var(--chart-2)',\n },\n } satisfies ChartConfig;\n\n return (\n \n
\n \n {panel.title}\n \n
\n

\n {panel.currency ? '$' : ''}\n {total.toLocaleString('en-US')}\n

\n \n {change > 0 ? '+' : ''}\n {change.toFixed(1)}%\n

\n

\n vs. last {period}\n

\n
\n
\n
\n \n This {period}\n
\n
\n \n Last {period}\n
\n
\n
\n {data.length ? (\n \n \n \n \n format(parseISO(date), tickFormat)\n }\n tickLine={false}\n tickMargin={16}\n ticks={ticks}\n />\n \n `${panel.currency ? '$' : ''}${value >= 1000 ? `${value / 1000}k` : value}`\n }\n tickLine={false}\n tickMargin={8}\n width={48}\n />\n (\n
\n \n \n {name === panel.current\n ? `This ${period}`\n : `Last ${period}`}\n \n \n {panel.currency ? '$' : ''}\n {Number(value).toLocaleString('en-US')}\n \n
\n )}\n labelClassName=\"font-normal text-muted-foreground\"\n labelFormatter={(label) =>\n typeof label === 'string'\n ? format(parseISO(label), labelFormat)\n : label\n }\n />\n }\n cursor={{\n stroke: 'var(--chart-1)',\n strokeDasharray: '3 3',\n }}\n />\n \n \n \n \n \n ) : (\n

\n No data for this date range.\n

\n )}\n \n );\n })}\n
\n
\n );\n}\n\nconst panels = [\n {\n id: 'revenue',\n title: 'Revenue',\n current: 'revenue',\n previous: 'priorRevenue',\n currency: true,\n },\n {\n id: 'charges',\n title: 'Charges',\n current: 'charges',\n previous: 'priorCharges',\n currency: false,\n },\n] as const;\n\ntype Day = { date: string; revenue: number; charges: number };\n\n// Seeded LCG so every render draws the same two years of demo data.\nlet seed = 20_251_116;\nconst random = () => {\n seed = (Math.imul(seed, 1_664_525) + 1_013_904_223) >>> 0;\n return seed / 2 ** 32;\n};\n\nconst days: Day[] = Array.from({ length: 731 }, (_, index) => {\n const date = new Date(Date.UTC(2023, 10, 17 + index));\n const growth = 1 + index / 731;\n const weekend = date.getUTCDay() % 6 === 0 ? 0.62 : 1;\n const season =\n 1 + 0.12 * Math.sin(((date.getUTCMonth() - 3) / 12) * Math.PI * 2);\n const spike = random() < 0.04 ? 1.6 : 1;\n const revenue = Math.round(\n 3400 * growth * weekend * season * spike * (0.82 + random() * 0.36)\n );\n return {\n date: date.toISOString().slice(0, 10),\n revenue,\n charges: Math.round((revenue / 13.5) * (0.9 + random() * 0.2)),\n };\n});\n\nconst activity = [\n 0.54, 0.46, 0.38, 0.35, 0.41, 0.58, 0.74, 0.97, 1.12, 1.38, 1.21, 1.53, 1.29,\n 1.41, 1.67, 1.48, 1.31, 1.58, 1.36, 1.19, 1.04, 0.86, 0.72, 0.63,\n];\n\n// Split a day's totals across 24 hours. Noise is keyed on the date so the\n// same day always draws the same curve, and the hourly shares sum to the day.\nfunction hours(day: Day | undefined, previous: Day | undefined) {\n if (!(day && previous)) {\n return [];\n }\n const weights = [day, previous].map((row) => {\n const key = Number(row.date.replaceAll('-', ''));\n const noisy = activity.map(\n (weight, hour) =>\n weight * (0.8 + 0.4 * ((Math.sin(key + hour * 7.31) + 1) / 2))\n );\n const total = noisy.reduce((sum, weight) => sum + weight, 0);\n return noisy.map((weight) => weight / total);\n });\n let share = 0;\n let priorShare = 0;\n return activity.map((_, hour) => {\n const from = share;\n const priorFrom = priorShare;\n share += weights[0][hour];\n priorShare += weights[1][hour];\n return {\n date: `${day.date}T${String(hour).padStart(2, '0')}:00:00`,\n revenue: Math.round(day.revenue * share) - Math.round(day.revenue * from),\n priorRevenue:\n Math.round(previous.revenue * priorShare) -\n Math.round(previous.revenue * priorFrom),\n charges: Math.round(day.charges * share) - Math.round(day.charges * from),\n priorCharges:\n Math.round(previous.charges * priorShare) -\n Math.round(previous.charges * priorFrom),\n };\n });\n}\n" }, { "path": "content/components/dashboard/dashboard-01/app/page.tsx", "type": "registry:page", "target": "app/page.tsx", "content": "'use client';\n\nimport { useState } from 'react';\nimport { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { CustomersTable } from '@/components/dashboard-01/customers-table';\nimport { DashboardCharts } from '@/components/dashboard-01/dashboard-charts';\nimport { DashboardHeader } from '@/components/dashboard-01/dashboard-header';\nimport { DashboardSidebar } from '@/components/dashboard-01/dashboard-sidebar';\n\nexport default function Page() {\n const [period, setPeriod] = useState<'day' | 'week' | 'month' | 'year'>(\n 'week'\n );\n const [range, setRange] = useState({ from: '2025-11-10', to: '2025-11-16' });\n\n const bindTheme = (node: HTMLElement | null) => {\n if (!node) {\n return;\n }\n const onKey = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n if (\n event.key === 'D' &&\n event.shiftKey &&\n !target.isContentEditable &&\n !['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)\n ) {\n document.documentElement.classList.toggle('dark');\n }\n };\n window.addEventListener('keydown', onKey);\n return () => window.removeEventListener('keydown', onKey);\n };\n\n return (\n \n \n Skip to dashboard\n \n \n \n \n
\n
\n {metrics.map((metric) => (\n \n
\n {metric.label}\n
\n
\n \n {metric.value}\n \n \n {metric.change}\n \n
\n
\n ))}\n \n \n \n \n \n \n );\n}\n\nconst metrics = [\n {\n label: 'New customers',\n value: '1,284',\n change: '+8.2%',\n changeClass: 'text-green-600 dark:text-green-400',\n },\n {\n label: 'Success rate',\n value: '97.4%',\n change: '+0.6%',\n changeClass: 'text-green-600 dark:text-green-400',\n },\n {\n label: 'Failure rate',\n value: '2.6%',\n change: '-0.6%',\n changeClass: 'text-red-600 dark:text-red-400',\n },\n {\n label: 'Refunds',\n value: '38',\n change: '0.0%',\n changeClass: 'text-muted-foreground',\n },\n];\n" } ], "categories": [ "dashboard" ] }, { "name": "dialog-01", "type": "registry:block", "title": "Dialog Confirmation", "description": "A dialog confirmation block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-01.tsx", "type": "registry:component", "target": "components/dialog-01.tsx", "content": "'use client';\n\nimport { Check } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\n\nexport default function Dialog01() {\n return (\n \n }>\n Show Dialog\n \n\n \n
\n
\n \n
\n
\n\n \n \n Payment successful\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur\n amet labore.\n \n \n \n }>\n Go back to dashboard\n \n \n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-02", "type": "registry:block", "title": "Dialog with Warning Icon", "description": "A dialog with warning icon block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-02.tsx", "type": "registry:component", "target": "components/dialog-02.tsx", "content": "'use client';\n\nimport { Check } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\n\nexport default function Dialog04() {\n return (\n \n }>\n Show Dialog\n \n\n \n
\n
\n \n
\n
\n\n \n \n Payment successful\n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur\n amet labore.\n \n \n \n }\n >\n Deactivate\n \n }\n >\n Cancel\n \n \n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-03", "type": "registry:block", "title": "Dialog with Input Field", "description": "A dialog with input field block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-03.tsx", "type": "registry:component", "target": "components/dialog-03.tsx", "content": "'use client';\nimport { AlertTriangleIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\n\nexport default function Dialog02() {\n const [open, setOpen] = useState(true);\n\n return (\n \n }>\n Deactivate\n \n \n
\n
\n \n
\n \n Deactivate account\n \n Are you sure you want to deactivate your account? All of your data\n will be permanently removed. This action cannot be undone.\n \n \n
\n \n }>\n Cancel\n \n \n \n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-04", "type": "registry:block", "title": "Dialog with Two Buttons", "description": "A dialog with two buttons block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog", "input", "label" ], "dependencies": [], "files": [ { "path": "content/components/dialogs/dialog-04.tsx", "type": "registry:component", "target": "components/dialog-04.tsx", "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Dialog03() {\n return (\n \n
\n }>Edit Profile\n
\n\n \n \n Edit Profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
\n \n \n
\n \n \n \n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-05", "type": "registry:block", "title": "Dialog with Password Confirmation", "description": "A dialog with password confirmation block.", "author": "ephraim duncan ", "registryDependencies": [ "alert-dialog", "button", "input", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-05.tsx", "type": "registry:component", "target": "components/dialog-05.tsx", "content": "'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FormEvent, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from '@/components/ui/alert-dialog';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Dialog05() {\n const [isOpen, setIsOpen] = useState(true);\n const [isVisible, setIsVisible] = useState(false);\n\n const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n const handleSubmit = (event: FormEvent) => {\n event.preventDefault();\n setIsOpen(false);\n };\n\n return (\n \n }>\n Delete Workspace\n \n \n \n \n Delete workspace\n \n \n All workspace data will be permanently deleted. There is no coming\n back after you press delete.\n \n \n
\n
\n \n
\n \n \n {isVisible ? (\n \n ) : (\n \n )}\n \n
\n
\n \n Cancel\n \n \n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-06", "type": "registry:block", "title": "Dialog with Privacy Toggle", "description": "A dialog with privacy toggle block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog", "input", "label", "switch" ], "dependencies": [], "files": [ { "path": "content/components/dialogs/dialog-06.tsx", "type": "registry:component", "target": "components/dialog-06.tsx", "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function Dialog06() {\n const [open, setOpen] = useState(true);\n\n return (\n \n setOpen(true)} />}>\n Create Workspace\n \n \n \n \n Create workspace\n \n \n Workspaces are shared environments where teams can connect to data\n sources, run queries and create reports.\n \n \n\n
\n
\n \n \n \n
\n
\n
\n
\n \n
\n
\n \n Set workspace to private\n \n

\n Only those invited can access or view\n

\n
\n
\n
\n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-07", "type": "registry:block", "title": "Dialog with Member List", "description": "A dialog with member list block.", "author": "ephraim duncan ", "registryDependencies": [ "alert-dialog", "button", "input", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-07.tsx", "type": "registry:component", "target": "components/dialog-07.tsx", "content": "'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FormEvent, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from '@/components/ui/alert-dialog';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Dialog08() {\n const [open, setOpen] = useState(true);\n const [isVisible, setIsVisible] = useState(false);\n\n const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n const handleSubmit = (event: FormEvent) => {\n event.preventDefault();\n setOpen(false);\n };\n\n return (\n \n }>\n Deactivate 2FA\n \n \n \n \n Deactivate two-step authentication\n \n \n Enter your password to deactivate the two-step authentication login.\n Make sure to have your smartphone ready.\n \n \n
\n
\n \n \n
\n
\n \n
\n \n \n {isVisible ? (\n \n ) : (\n \n )}\n \n
\n
\n\n \n Cancel\n \n \n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-08", "type": "registry:block", "title": "Dialog with Email and Password Fields", "description": "A dialog with email and password fields block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "badge", "button", "dialog", "input" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-08.tsx", "type": "registry:component", "target": "components/dialog-08.tsx", "content": "'use client';\n\nimport { UserPlus } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\n\nconst members = [\n {\n name: 'Ephraim Duncan',\n email: 'ephraim@documenso.com',\n avatarUrl: 'https://blocks.so/avatar-01.png',\n initials: 'ED',\n status: 'member',\n },\n {\n name: 'Lucas Smith',\n email: 'lucas@documenso.com',\n avatarUrl: 'https://blocks.so/avatar-03.png',\n initials: 'LS',\n status: 'member',\n },\n {\n name: 'Timur Ercan',\n email: 'timur@documenso.com',\n avatarUrl: 'https://blocks.so/avatar-02.jpg',\n initials: 'TE',\n status: 'member',\n },\n {\n name: 'Catalin Pit',\n email: 'catalin@documenso.com',\n avatarUrl: 'https://blocks.so/avatar-04.jpg',\n initials: 'CP',\n status: 'member',\n },\n];\n\nexport default function Dialog07() {\n const [open, setOpen] = useState(true);\n\n return (\n \n setOpen(true)} />}>\n Invite members\n \n \n \n \n Invite members\n \n \n Add new team members to your workspace. Please consider your\n organization's policies when adding external people.\n \n \n
\n
\n
\n \n \n
\n \n
\n
\n

\n People with existing access\n

\n
    \n {members.map((member) => (\n \n
    \n \n \n {member.initials}\n \n \n {member.name}\n \n
    \n \n {member.status}\n \n \n ))}\n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-09", "type": "registry:block", "title": "Dialog with Link Share and Toggles", "description": "A dialog with link share and toggles block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog", "input", "label", "switch", "tooltip" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-09.tsx", "type": "registry:component", "target": "components/dialog-09.tsx", "content": "'use client';\n\nimport { CheckIcon, CopyIcon, ExternalLink, Link, Share2 } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport default function Dialog09() {\n const [copied, setCopied] = useState(false);\n const inputRef = useRef(null);\n\n const handleCopy = () => {\n if (inputRef.current) {\n navigator.clipboard.writeText(inputRef.current.value);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n }\n };\n\n return (\n \n }>\n \n Share\n \n \n \n Share & Collaborate\n

\n Share this project with your team to collaborate on it.\n

\n \n
\n
\n
\n Enable comments and suggestions\n
\n \n
\n\n
\n \n
\n \n \n \n \n }\n >\n \n \n
\n \n \n
\n \n \n {copied ? 'Copied!' : 'Copy to clipboard'}\n \n \n \n
\n \n\n
\n \n \n
\n \n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-10", "type": "registry:block", "title": "Dialog with Calendar and Time Picker", "description": "A dialog with calendar and time picker block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "calendar", "dialog", "input", "label", "popover", "select", "textarea" ], "dependencies": [ "date-fns", "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-10.tsx", "type": "registry:component", "target": "components/dialog-10.tsx", "content": "'use client';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/components/ui/popover';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport default function Dialog10() {\n const [date, setDate] = useState(new Date());\n const [startTime, setStartTime] = useState('09:00');\n\n const timeOptions = useMemo(() => {\n const options = [];\n for (let hour = 0; hour <= 23; hour++) {\n for (let minute = 0; minute < 60; minute += 30) {\n const formattedHour = hour.toString().padStart(2, '0');\n const formattedMinute = minute.toString().padStart(2, '0');\n const value = `${formattedHour}:${formattedMinute}`;\n const tempDate = new Date(2000, 0, 1, hour, minute);\n const label = format(tempDate, 'h:mm a');\n options.push({ value, label });\n }\n }\n\n if (!options.find((opt) => opt.value === '23:59')) {\n const endOfDay = new Date(2000, 0, 1, 23, 59);\n options.push({ value: '23:59', label: format(endOfDay, 'h:mm a') });\n }\n\n return options;\n }, []);\n return (\n \n }>Show dialog\n \n \n Schedule a Meeting\n \n\n
\n
\n
\n \n \n
\n\n
\n \n \n

\n Enter email addresses separated by commas.\n

\n
\n\n
\n
\n \n \n \n }\n >\n {' '}\n {date ? format(date, 'PPP') : Pick a date}\n \n \n \n \n \n
\n\n
\n \n {\n if (value) {\n setStartTime(value);\n }\n }}\n value={startTime}\n >\n \n \n \n \n {timeOptions.map((option) => (\n \n {option.label}\n \n ))}\n \n \n
\n
\n\n
\n \n \n
\n\n
\n \n \n
\n
\n\n
\n }>\n Cancel\n \n \n
\n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-11", "type": "registry:block", "title": "Dialog Multi-Step Wizard", "description": "A dialog multi-step wizard block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "dialog", "label", "select", "separator" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-11.tsx", "type": "registry:component", "target": "components/dialog-11.tsx", "content": "'use client';\n\nimport { AppWindowIcon as Apps } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Label } from '@/components/ui/label';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nexport default function Dialog11() {\n return (\n \n }>Initialize New Project\n \n \n Initialize New Project\n \n\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n

\n Project Starter\n

\n

\n Configure your new codebase\n

\n
\n
\n \n

\n Description\n

\n

\n Quickly set up the foundational tools for your project.\n

\n

\n Info\n

\n

\n Select your preferred stack and configurations.\n

\n
\n
\n
\n }>\n Cancel\n \n \n
\n
\n\n
\n
\n
\n
\n 1\n
\n \n Select Framework\n \n
\n \n \n \n \n \n Next.js\n React Router\n Tanstack Start\n SvelteKit\n SolidStart\n \n \n
\n
\n
\n
\n 2\n
\n \n Choose Package Manager\n \n
\n \n \n \n \n \n npm\n yarn\n pnpm\n bun\n \n \n
\n
\n
\n
\n 3\n
\n \n Configure Linter/Formatter\n \n
\n

\n Ensure code quality and consistency.\n

\n \n \n \n \n \n \n ESLint + Prettier\n \n ESLint Only\n Prettier Only\n Biome\n Oxlint\n None\n \n \n
\n
\n
\n
\n 4\n
\n \n Select Testing Tool\n \n
\n

\n Choose a framework for unit/integration tests.\n

\n \n \n \n \n \n Jest\n Vitest\n Cypress\n None\n \n \n
\n
\n
\n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "dialog-12", "type": "registry:block", "title": "Dialog with Avatar Upload", "description": "A dialog with avatar upload block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "dialog", "input", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/dialogs/dialog-12.tsx", "type": "registry:component", "target": "components/dialog-12.tsx", "content": "'use client';\n\nimport { Plus, UserRoundIcon, X } from 'lucide-react';\nimport { useRef, useState } from 'react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Dialog12() {\n const [open, setOpen] = useState(true);\n const [authorName, setAuthorName] = useState('Ephraim Duncan');\n const [title, setTitle] = useState('Design Engineer');\n const [image, setImage] = useState(null);\n const fileInputRef = useRef(null);\n\n const handleFileChange = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n if (file.size > 1_048_576) {\n alert('File size exceeds 1MB limit');\n return;\n }\n\n const reader = new FileReader();\n reader.onload = (event) => {\n setImage(event.target?.result as string);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const triggerFileInput = () => {\n fileInputRef.current?.click();\n };\n\n return (\n \n }>Open Dialog\n \n \n \n Add a writer\n \n \n\n
\n
\n
\n \n \n \n \n \n \n {\n if (image) {\n setImage(null);\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n } else {\n triggerFileInput();\n }\n }}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n {image ? (\n \n ) : (\n \n )}\n \n {image ? 'Remove image' : 'Upload image'}\n \n \n
\n\n

Upload Image

\n

\n Max file size: 1MB\n

\n \n \n Add Image\n \n
\n\n
\n
\n
\n \n setAuthorName(e.target.value)}\n required\n value={authorName}\n />\n
\n\n
\n
\n \n
\n setTitle(e.target.value)}\n value={title}\n />\n
\n
\n\n
\n \n \n
\n
\n
\n \n \n );\n}\n" } ], "categories": [ "dialogs" ] }, { "name": "file-upload-01", "type": "registry:block", "title": "File Upload with Preview", "description": "A file upload with preview block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "input", "label", "select", "tooltip" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/file-upload/file-upload-01/dropzone.tsx", "type": "registry:component", "target": "components/file-upload-01/dropzone.tsx", "content": "import { Upload } from 'lucide-react';\nimport type React from 'react';\nimport type { RefObject } from 'react';\n\ninterface FileDropzoneProps {\n fileInputRef: RefObject;\n handleBoxClick: () => void;\n handleDragOver: (e: React.DragEvent) => void;\n handleDrop: (e: React.DragEvent) => void;\n handleFileSelect: (files: FileList | null) => void;\n}\n\nexport function FileDropzone({\n fileInputRef,\n handleBoxClick,\n handleDragOver,\n handleDrop,\n handleFileSelect,\n}: FileDropzoneProps) {\n return (\n
\n \n
\n \n
\n

\n Upload a project image\n

\n

\n or,{' '}\n e.stopPropagation()} // Prevent triggering handleBoxClick\n >\n click to browse\n {' '}\n (4MB max)\n

\n handleFileSelect(e.target.files)}\n ref={fileInputRef}\n type=\"file\"\n />\n
\n \n );\n}\n" }, { "path": "content/components/file-upload/file-upload-01/file-item.tsx", "type": "registry:component", "target": "components/file-upload-01/file-item.tsx", "content": "import { Trash2 } from 'lucide-react';\nimport { useEffect } from 'react';\nimport { Button } from '@/components/ui/button';\n\ninterface UploadedFileItemProps {\n file: File;\n progress: number;\n onRemove: (filename: string) => void;\n}\n\nexport function UploadedFileItem({\n file,\n progress,\n onRemove,\n}: UploadedFileItemProps) {\n const imageUrl = URL.createObjectURL(file);\n\n useEffect(() => {\n return () => URL.revokeObjectURL(imageUrl);\n }, [imageUrl]);\n\n return (\n \n
\n
\n \n
\n\n
\n
\n
\n \n {file.name}\n \n \n {Math.round(file.size / 1024)} KB\n \n
\n onRemove(file.name)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n
\n\n
\n
\n \n
\n \n {Math.round(progress || 0)}%\n \n
\n
\n
\n \n );\n}\n" }, { "path": "content/components/file-upload/file-upload-01/index.tsx", "type": "registry:component", "target": "components/file-upload-01/index.tsx", "content": "'use client';\n\nimport { HelpCircle } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/ui/tooltip';\nimport { FileDropzone } from '@/components/file-upload-01/dropzone';\nimport { FileList } from '@/components/file-upload-01/file-list';\nimport { Form } from '@/components/file-upload-01/form';\n\nexport default function FileUpload01() {\n const fileInputRef = useRef(null);\n const [uploadedFiles, setUploadedFiles] = useState([]);\n const [fileProgresses, setFileProgresses] = useState>(\n {}\n );\n\n const handleFileSelect = (files: FileList | null) => {\n if (!files) return;\n\n const newFiles = Array.from(files);\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n\n newFiles.forEach((file) => {\n let progress = 0;\n const interval = setInterval(() => {\n progress += Math.random() * 10;\n if (progress >= 100) {\n progress = 100;\n clearInterval(interval);\n }\n setFileProgresses((prev) => ({\n ...prev,\n [file.name]: Math.min(progress, 100),\n }));\n }, 300);\n });\n };\n\n const handleBoxClick = () => {\n fileInputRef.current?.click();\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n handleFileSelect(e.dataTransfer.files);\n };\n\n const removeFile = (filename: string) => {\n setUploadedFiles((prev) => prev.filter((file) => file.name !== filename));\n setFileProgresses((prev) => {\n const newProgresses = { ...prev };\n delete newProgresses[filename];\n return newProgresses;\n });\n };\n\n return (\n
\n \n \n
\n
\n
\n

\n Create a new project\n

\n

\n Drag and drop files to create a new project.\n

\n
\n
\n
\n
\n \n \n
\n \n \n \n }\n >\n \n Need help?\n \n \n
\n

Need assistance?

\n

\n Upload project images by dragging and dropping files or\n using the file browser. Supported formats: JPG, PNG, SVG.\n Maximum file size: 4MB.\n

\n
\n \n \n \n\n
\n \n Cancel\n \n \n
\n
\n \n \n
\n );\n}\n" }, { "path": "content/components/file-upload/file-upload-01/form.tsx", "type": "registry:component", "target": "components/file-upload-01/form.tsx", "content": "import { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\n\nexport function Form() {\n return (\n
\n
\n
\n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n Ephraim Duncan\n \n \n \n Lucas Smith\n \n \n \n Timur Ercan\n \n \n \n \n
\n
\n
\n );\n}\n" }, { "path": "content/components/file-upload/file-upload-01/file-list.tsx", "type": "registry:component", "target": "components/file-upload-01/file-list.tsx", "content": "import { cn } from '@/lib/utils';\nimport { UploadedFileItem } from '@/components/file-upload-01/file-item';\n\ninterface UploadedFileListProps {\n uploadedFiles: File[];\n fileProgresses: Record;\n removeFile: (filename: string) => void;\n}\n\nexport function FileList({\n uploadedFiles,\n fileProgresses,\n removeFile,\n}: UploadedFileListProps) {\n if (uploadedFiles.length === 0) {\n return null;\n }\n\n return (\n
\n {uploadedFiles.map((file, index) => (\n \n ))}\n
\n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-01", "type": "registry:block", "title": "File Upload with Preview", "description": "A file upload with preview block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "input", "label", "select", "tooltip" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/file-upload/file-upload-01.tsx", "type": "registry:component", "target": "components/file-upload-01.tsx", "content": "'use client';\n\nimport { HelpCircle, Trash2, Upload } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport default function FileUpload01() {\n const fileInputRef = useRef(null);\n const [uploadedFiles, setUploadedFiles] = useState([]);\n const [fileProgresses, setFileProgresses] = useState>(\n {}\n );\n\n const handleFileSelect = (files: FileList | null) => {\n if (!files) return;\n\n const newFiles = Array.from(files);\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n\n // Simulate upload progress for each file\n newFiles.forEach((file) => {\n let progress = 0;\n const interval = setInterval(() => {\n progress += Math.random() * 10;\n if (progress >= 100) {\n progress = 100;\n clearInterval(interval);\n }\n setFileProgresses((prev) => ({\n ...prev,\n [file.name]: Math.min(progress, 100),\n }));\n }, 300);\n });\n };\n\n const handleBoxClick = () => {\n fileInputRef.current?.click();\n };\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n };\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault();\n handleFileSelect(e.dataTransfer.files);\n };\n\n const removeFile = (filename: string) => {\n setUploadedFiles((prev) => prev.filter((file) => file.name !== filename));\n setFileProgresses((prev) => {\n const newProgresses = { ...prev };\n delete newProgresses[filename];\n return newProgresses;\n });\n };\n\n return (\n
\n \n \n
\n
\n
\n

\n Create a new project\n

\n

\n Drag and drop files to create a new project.\n

\n
\n
\n
\n\n
\n
\n
\n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n Ephraim Duncan\n \n \n \n Lucas Smith\n \n \n \n Timur Ercan\n \n \n \n \n
\n
\n
\n\n
\n \n
\n \n
\n

\n Upload a project image\n

\n

\n or,{' '}\n e.stopPropagation()}\n >\n click to browse\n {' '}\n (4MB max)\n

\n handleFileSelect(e.target.files)}\n ref={fileInputRef}\n type=\"file\"\n />\n
\n
\n\n 0 ? 'mt-4' : ''\n )}\n >\n {uploadedFiles.map((file, index) => {\n const imageUrl = URL.createObjectURL(file);\n\n return (\n {\n return () => URL.revokeObjectURL(imageUrl);\n }}\n >\n
\n
\n \n
\n\n
\n
\n
\n \n {file.name}\n \n \n {Math.round(file.size / 1024)} KB\n \n
\n removeFile(file.name)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n \n \n
\n\n
\n
\n \n
\n \n {Math.round(fileProgresses[file.name] || 0)}%\n \n
\n
\n
\n \n );\n })}\n \n\n
\n \n \n \n }\n >\n \n Need help?\n \n \n
\n

\n Need assistance?\n

\n

\n Upload project images by dragging and dropping files or\n using the file browser. Supported formats: JPG, PNG, SVG.\n Maximum file size: 4MB.\n

\n
\n \n \n \n\n
\n \n Cancel\n \n \n
\n
\n \n \n \n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-02", "type": "registry:block", "title": "File Upload Simple", "description": "A file upload simple block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "input", "label" ], "dependencies": [], "files": [ { "path": "content/components/file-upload/file-upload-02.tsx", "type": "registry:component", "target": "components/file-upload-02.tsx", "content": "import { Button } from '@/components/ui/button';\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function FileUpload02() {\n return (\n
\n \n \n Set up your first workspace\n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n \n \n \n \n
\n
\n \n \n
\n
\n \n \n

\n You are only allowed to upload CSV, XLSX or XLS files.\n

\n
\n
\n
\n \n \n
\n \n \n \n
\n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-03", "type": "registry:block", "title": "File Upload Multi-File Dropzone", "description": "A file upload multi-file dropzone block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "input", "label", "select", "separator" ], "dependencies": [ "lucide-react", "react-dropzone" ], "files": [ { "path": "content/components/file-upload/file-upload-03.tsx", "type": "registry:component", "target": "components/file-upload-03.tsx", "content": "'use client';\n\nimport { File, Trash } from 'lucide-react';\nimport React from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nimport { Button } from '@/components/ui/button';\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nexport default function FileUpload03() {\n const [files, setFiles] = React.useState([]);\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop: (acceptedFiles) => setFiles(acceptedFiles),\n });\n\n const filesList = files.map((file) => (\n
  • \n \n
    \n \n setFiles((prevFiles) =>\n prevFiles.filter((prevFile) => prevFile.name !== file.name)\n )\n }\n size=\"icon\"\n type=\"button\"\n variant=\"ghost\"\n >\n \n \n
    \n \n \n \n \n
    \n

    \n {file.name}\n

    \n

    \n {file.size} bytes\n

    \n
    \n     \n     \n
    • \n ));\n\n return (\n
    \n \n \n Set up your first cloud storage\n \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n \n Private\n Public\n \n \n

    \n Only admins can change visibility.\n

    \n
    \n
    \n \n \n
    \n \n
    \n

    Drag and drop or

    \n \n choose file(s)\n \n \n

    to upload

    \n
    \n
    \n
    \n

    \n All file types are allowed to upload.\n Max. size per file: 50MB\n

    \n {filesList.length > 0 && (\n <>\n

    \n File(s) to upload\n

    \n
      \n {filesList}\n
    \n \n )}\n
    \n
    \n \n
    \n \n \n
    \n \n \n \n \n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-04", "type": "registry:block", "title": "File Upload Drag & Drop", "description": "A file upload drag & drop block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "progress" ], "dependencies": [ "lucide-react", "sonner" ], "files": [ { "path": "content/components/file-upload/file-upload-04.tsx", "type": "registry:component", "target": "components/file-upload-04.tsx", "content": "'use client';\n\nimport { File, FileSpreadsheet, X } from 'lucide-react';\nimport { type ChangeEvent, type DragEvent, useRef, useState } from 'react';\nimport { toast } from 'sonner';\n\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function FileUpload04() {\n const [uploadState, setUploadState] = useState<{\n file: File | null;\n progress: number;\n uploading: boolean;\n }>({\n file: null,\n progress: 0,\n uploading: false,\n });\n const [showDummy, setShowDummy] = useState(true);\n const fileInputRef = useRef(null);\n\n const validFileTypes = [\n 'text/csv',\n 'application/vnd.ms-excel',\n 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n ];\n\n const handleFile = (file: File | undefined) => {\n if (!file) return;\n\n if (validFileTypes.includes(file.type)) {\n setUploadState({ file, progress: 0, uploading: true });\n\n const interval = setInterval(() => {\n setUploadState((prev) => {\n const newProgress = prev.progress + 5;\n if (newProgress >= 100) {\n clearInterval(interval);\n return { ...prev, progress: 100, uploading: false };\n }\n return { ...prev, progress: newProgress };\n });\n }, 200);\n } else {\n toast.error('Please upload a CSV, XLSX, or XLS file.', {\n position: 'bottom-right',\n duration: 3000,\n });\n }\n };\n\n const handleFileChange = (event: ChangeEvent) => {\n handleFile(event.target.files?.[0]);\n };\n\n const handleDrop = (event: DragEvent) => {\n event.preventDefault();\n handleFile(event.dataTransfer.files?.[0]);\n };\n\n const resetFile = () => {\n setUploadState({ file: null, progress: 0, uploading: false });\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n };\n\n const getFileIcon = () => {\n if (!uploadState.file) return ;\n\n const fileExt = uploadState.file.name.split('.').pop()?.toLowerCase() || '';\n return ['csv', 'xlsx', 'xls'].includes(fileExt) ? (\n \n ) : (\n \n );\n };\n\n const formatFileSize = (bytes: number) => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Number.parseFloat((bytes / k ** i).toFixed(1)) + ' ' + sizes[i];\n };\n\n const { file, progress, uploading } = uploadState;\n\n return (\n
    \n
    e.preventDefault()}>\n

    \n File Upload\n

    \n\n e.preventDefault()}\n onDrop={handleDrop}\n >\n
    \n \n
    \n

    Drag and drop or

    \n \n choose file\n \n \n

    to upload

    \n
    \n
    \n
    \n\n

    \n Accepted file types: CSV, XLSX or XLS files.\n Max. size: 10MB\n

    \n\n {!file && showDummy && (\n \n setShowDummy(false)}\n size=\"icon-sm\"\n type=\"button\"\n variant=\"ghost\"\n >\n \n \n\n
    \n \n \n \n
    \n

    \n Revenue_Q1_2024.xlsx\n

    \n

    \n 3.1 MB\n

    \n
    \n
    \n\n
    \n \n 45%\n
    \n     \n )}\n\n {file && (\n \n \n \n \n\n
    \n \n {getFileIcon()}\n \n
    \n

    \n {file?.name}\n

    \n

    \n {file && formatFileSize(file.size)}\n

    \n
    \n
    \n\n
    \n \n {progress}%\n
    \n     \n )}\n\n
    \n \n Cancel\n \n \n Upload\n \n
    \n \n \n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-05", "type": "registry:block", "title": "File Upload with Progress", "description": "A file upload with progress block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/file-upload/file-upload-05.tsx", "type": "registry:component", "target": "components/file-upload-05.tsx", "content": "import { FileSpreadsheet, Upload, X } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Label } from '@/components/ui/label';\n\nexport default function FileUpload05() {\n return (\n
    \n
    \n

    \n File Upload\n

    \n
    \n
    \n \n
    \n

    Drag and drop or

    \n \n choose file\n \n \n

    to upload

    \n
    \n
    \n
    \n

    \n Recommended max. size: 10 MB, Accepted file types: XLSX, XLS, CSV.\n

    \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n
    \n

    \n Revenue_Q1_2024.xlsx\n

    \n

    \n 3.1 MB\n Completed\n

    \n
    \n
    \n
    \n
    \n \n Cancel\n \n \n Upload\n \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "file-upload-06", "type": "registry:block", "title": "File Upload with Status Sections", "description": "A file upload with status sections block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "progress", "separator" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/file-upload/file-upload-06.tsx", "type": "registry:component", "target": "components/file-upload-06.tsx", "content": "'use client';\n\nimport { CheckCircle, FileText, Loader2, Upload, X } from 'lucide-react';\nimport type React from 'react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\nimport { Progress } from '@/components/ui/progress';\nimport { Separator } from '@/components/ui/separator';\n\ninterface UploadItem {\n id: string;\n name: string;\n progress: number;\n status: 'uploading' | 'completed';\n}\n\nexport default function FileUpload06() {\n const [uploads, setUploads] = useState([\n {\n id: 'a1',\n name: 'design-mock-landing.png',\n progress: 62,\n status: 'uploading',\n },\n {\n id: 'b2',\n name: 'team-headshot-2025-01-09.jpg',\n progress: 28,\n status: 'uploading',\n },\n {\n id: 'c3',\n name: 'logo-v3-final.gif',\n progress: 100,\n status: 'completed',\n },\n ]);\n const filePickerRef = useRef(null);\n\n const openFilePicker = () => {\n filePickerRef.current?.click();\n };\n\n const onFileInputChange = (event: React.ChangeEvent) => {\n const selectedFiles = event.target.files;\n if (selectedFiles) {\n console.log('Files selected:', selectedFiles);\n }\n };\n\n const onDragOver = (event: React.DragEvent) => {\n event.preventDefault();\n };\n\n const onDropFiles = (event: React.DragEvent) => {\n event.preventDefault();\n const droppedFiles = event.dataTransfer.files;\n if (droppedFiles) {\n console.log('Files dropped:', droppedFiles);\n }\n };\n\n const removeUploadById = (id: string) => {\n setUploads(uploads.filter((file) => file.id !== id));\n };\n\n const activeUploads = uploads.filter((file) => file.status === 'uploading');\n const completedUploads = uploads.filter(\n (file) => file.status === 'completed'\n );\n\n return (\n
    \n \n
    \n
    \n \n
    \n Drop files here or{' '}\n \n browse files\n {' '}\n to add\n
    \n
    \n
    \n \n \n Supported: JPG, PNG, GIF (max 10 MB)\n \n \n\n
    \n {activeUploads.length > 0 && (\n
    \n

    \n \n Uploading\n

    \n
    \n {activeUploads.map((file) => (\n
    \n
    \n \n removeUploadById(file.id)}\n size=\"icon\"\n variant=\"ghost\"\n >\n \n \n
    \n
    \n
    \n \n {file.name}\n \n \n {file.progress}%\n \n
    \n \n
    \n
    \n ))}\n
    \n
    \n )}\n\n {activeUploads.length > 0 && completedUploads.length > 0 && (\n \n )}\n\n {completedUploads.length > 0 && (\n
    \n

    \n \n Finished\n

    \n
    \n {completedUploads.map((file) => (\n
    \n
    \n \n removeUploadById(file.id)}\n size=\"icon\"\n variant=\"ghost\"\n >\n \n \n
    \n
    \n
    \n \n {file.name}\n \n \n {file.progress}%\n \n
    \n \n
    \n
    \n ))}\n
    \n
    \n )}\n
    \n
    \n );\n}\n" } ], "categories": [ "file-upload" ] }, { "name": "form-layout-01", "type": "registry:block", "title": "Form with Workspace Fields", "description": "A form with workspace fields block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "field", "input", "separator" ], "dependencies": [], "files": [ { "path": "content/components/form-layout/form-layout-01.tsx", "type": "registry:component", "target": "components/form-layout-01.tsx", "content": "import { Button } from '@/components/ui/button';\nimport { Field, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\n\nexport default function FormLayout01() {\n return (\n
    \n
    \n

    \n Register to workspace\n

    \n

    \n Take a few moments to register for your company's workspace\n

    \n
    \n
    \n
    \n \n \n First name\n *\n \n \n \n
    \n
    \n \n \n Last name\n *\n \n \n \n
    \n
    \n \n \n Email\n *\n \n \n \n
    \n
    \n \n Address\n \n \n
    \n
    \n \n City\n \n \n
    \n
    \n \n State\n \n \n
    \n
    \n \n Postal code\n \n \n
    \n
    \n \n
    \n \n Cancel\n \n \n
    \n \n
    \n
    \n );\n}\n" } ], "categories": [ "form-layout" ] }, { "name": "form-layout-02", "type": "registry:block", "title": "Form with Side Labels", "description": "A form with side labels block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "field", "input", "radio-group", "select", "separator", "textarea" ], "dependencies": [], "files": [ { "path": "content/components/form-layout/form-layout-02.tsx", "type": "registry:component", "target": "components/form-layout-02.tsx", "content": "import { Button } from '@/components/ui/button';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { Textarea } from '@/components/ui/textarea';\n\nexport default function FormLayout02() {\n return (\n
    \n
    \n
    \n
    \n

    \n Personal information\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n
    \n \n First name\n \n \n
    \n
    \n \n Last name\n \n \n
    \n
    \n \n Email\n \n \n
    \n
    \n \n Birth year\n \n \n
    \n
    \n \n Role\n \n \n Roles can only be changed by system admin.\n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    \n Workspace settings\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n
    \n \n \n Workspace name\n \n \n \n
    \n
    \n \n Visibility\n \n \n \n \n \n Public\n Private\n \n \n \n
    \n
    \n \n \n Workspace description\n \n \n \n Note: description provided will not be displayed externally.\n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    \n Notification settings\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n \n Newsletter\n \n \n Change how often you want to receive updates from our\n newsletter.\n \n \n
    \n \n \n Every week\n \n
    \n
    \n \n \n Every month\n \n
    \n
    \n \n \n Never\n \n
    \n     \n
    \n
    \n
    \n \n
    \n \n \n
    \n \n
    \n );\n}\n" } ], "categories": [ "form-layout" ] }, { "name": "form-layout-03", "type": "registry:block", "title": "Form with Checkbox Settings", "description": "A form with checkbox settings block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "checkbox", "field", "input", "select", "separator", "textarea" ], "dependencies": [], "files": [ { "path": "content/components/form-layout/form-layout-03.tsx", "type": "registry:component", "target": "components/form-layout-03.tsx", "content": "import { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { Textarea } from '@/components/ui/textarea';\n\nexport default function FormLayout03() {\n return (\n
    \n
    \n
    \n
    \n

    \n Personal information\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n
    \n \n First name\n \n \n
    \n
    \n \n Last name\n \n \n
    \n
    \n \n Email\n \n \n
    \n
    \n \n Birth year\n \n \n
    \n
    \n \n Role\n \n \n Roles can only be changed by system admin.\n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    \n Workspace settings\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n
    \n \n \n Workspace name\n \n \n \n
    \n
    \n \n Visibility\n \n \n \n \n \n Public\n Private\n \n \n \n
    \n
    \n \n \n Workspace description\n \n \n \n Note: description provided will not be displayed externally.\n \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n

    \n Notification settings\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n

    \n
    \n
    \n
    \n \n Team\n \n \n Configure the types of team alerts you want to receive.\n \n
    \n
    \n \n \n Team join requests\n \n
    \n
    \n \n \n Weekly team activity digest\n \n
    \n
    \n
    \n
    \n \n Usage\n \n \n Configure the types of usage alerts you want to receive.\n \n
    \n
    \n \n \n API requests\n \n
    \n
    \n \n \n Workspace loading times\n \n
    \n
    \n \n \n Query caching\n \n
    \n
    \n \n \n Storage\n \n
    \n
    \n
    \n
    \n
    \n \n
    \n \n \n
    \n \n
    \n );\n}\n" } ], "categories": [ "form-layout" ] }, { "name": "form-layout-04", "type": "registry:block", "title": "Form with Package Selection", "description": "A form with package selection block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "field", "input", "radio-group", "select", "separator" ], "dependencies": [], "files": [ { "path": "content/components/form-layout/form-layout-04.tsx", "type": "registry:component", "target": "components/form-layout-04.tsx", "content": "'use client';\n\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\n\nconst workspaces = [\n {\n id: 1,\n title: 'Starter',\n description: 'Up to 10,000 requests per day.',\n users: 'Free',\n },\n {\n id: 2,\n title: 'Premium',\n description: '500,000 requests per day¹',\n users: '$900/month²',\n },\n {\n id: 3,\n title: 'Enterprise',\n description: 'Based on your specific needs',\n users: 'Custom',\n },\n];\n\nexport default function FormLayout04() {\n const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]);\n\n return (\n
    \n
    \n

    \n Apply for early access\n

    \n

    \n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n

    \n
    \n
    \n
    \n \n \n First name*\n \n \n \n
    \n
    \n \n Last name\n \n \n
    \n
    \n \n \n Work email*\n \n \n \n
    \n
    \n \n Company\n \n \n
    \n
    \n \n Company size (employees)\n \n \n
    \n \n
    \n \n Select a workspace package\n \n\n \n setSelectedWorkspace(\n workspaces.find(\n (workspace) => workspace.id.toString() === value\n ) || workspaces[0]\n )\n }\n >\n {workspaces.map((item) => (\n \n
    \n \n\n \n {item.title}\n \n
    \n
    \n

    \n {item.description}\n

    \n \n {item.users}\n \n
    \n
    \n ))}\n \n\n \n 1 $0.5/10K requests after limit reach.\n \n \n 2 No credit card required for registration.\n \n
    \n
    \n \n
    \n \n Go back\n \n \n
    \n \n
    \n \n );\n}\n" } ], "categories": [ "form-layout" ] }, { "name": "form-layout-05", "type": "registry:block", "title": "Form with Plan Selection", "description": "A form with plan selection block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "button", "card", "field", "input", "radio-group", "select", "separator" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/form-layout/form-layout-05.tsx", "type": "registry:component", "target": "components/form-layout-05.tsx", "content": "'use client';\n\nimport { Check, CircleCheck, ExternalLink } from 'lucide-react';\nimport { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nconst highlights = [\n {\n id: 1,\n feature: 'Used by top design teams worldwide',\n },\n {\n id: 2,\n feature: 'Seamless integration with design tools',\n },\n {\n id: 3,\n feature: 'Real-time collaboration features',\n },\n];\n\nconst plans = [\n {\n name: 'Creator',\n features: [\n { feature: 'Up to 3 design projects' },\n { feature: 'Basic collaboration tools' },\n { feature: '5GB cloud storage' },\n { feature: 'Community forum support' },\n ],\n price: '$15',\n href: '#',\n isRecommended: false,\n },\n {\n name: 'Team',\n features: [\n { feature: 'Unlimited design projects' },\n { feature: 'Advanced collaboration suite' },\n { feature: '50GB cloud storage' },\n { feature: 'Priority email support' },\n ],\n price: '$49',\n href: '#',\n isRecommended: true,\n },\n {\n name: 'Agency',\n features: [\n { feature: 'Unlimited projects and team members' },\n { feature: 'Client portal access' },\n { feature: '250GB cloud storage' },\n { feature: 'White-labeling options' },\n { feature: 'Dedicated account manager' },\n ],\n price: '$99',\n href: '#',\n isRecommended: false,\n },\n];\n\nexport default function FormLayout05() {\n const [selected, setSelected] = useState(plans[0]);\n\n return (\n
    \n
    \n

    \n Create new design workspace\n

    \n
    \n
    \n
    \n
    \n
    \n \n Organization\n \n \n \n \n \n Acme, Inc.\n Hero Labs\n Rose Holding\n \n \n \n
    \n
    \n \n Workspace name\n \n \n
    \n
    \n
    \n \n Region\n \n \n \n \n \n \n eu-central-1 (Frankfurt, Germany)\n \n \n us-east-1 (Washington, D.C., USA)\n \n \n eu-west-2 (London, United Kingdom)\n \n \n us-west-1 (San Francisco, USA)\n \n \n ap-southeast-1 (Singapore)\n \n \n \n \n For best performance, choose a region closest to your\n operations\n \n \n
    \n
    \n

    \n Plan type*\n

    \n \n setSelected(\n plans.find((plan) => plan.name === value) || plans[0]\n )\n }\n value={selected.name}\n >\n {plans.map((plan) => (\n \n
    \n
    \n \n
    \n
    \n

    \n \n {plan.name}\n \n {plan.isRecommended && (\n \n recommended\n \n )}\n

    \n
      \n {plan.features.map((feature, index) => (\n \n \n {feature.feature}\n \n ))}\n
    \n
    \n
    \n
    \n \n Learn more\n \n \n
    \n \n {plan.price}\n \n /mo\n
    \n
    \n \n ))}\n \n
    \n
    \n \n \n

    \n Choose the right plan for your design team\n

    \n

    \n Our flexible plans are designed to scale with your team's\n needs. All plans include core design collaboration features\n with varying levels of storage and support.\n

    \n
      \n {highlights.map((item) => (\n \n \n {item.feature}\n \n ))}\n
    \n \n Learn more\n \n \n     \n     \n
    \n
    \n \n
    \n \n \n
    \n \n
    \n );\n}\n" } ], "categories": [ "form-layout" ] }, { "name": "grid-list-01", "type": "registry:block", "title": "Grid List with Dropdown", "description": "A grid list with dropdown block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "dropdown-menu" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/grid-list/grid-list-01.tsx", "type": "registry:component", "target": "components/grid-list-01.tsx", "content": "import { MoreVertical } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nconst bookCollections = [\n { name: 'Science Fiction', initials: 'SF', href: '#', books: 37 },\n { name: 'Mystery Thrillers', initials: 'MT', href: '#', books: 29 },\n { name: 'Historical Fiction', initials: 'HF', href: '#', books: 23 },\n];\n\nexport default function GridList01() {\n return (\n
    \n
    \n

    \n Favorite Book Collections\n

    \n \n {bookCollections.map((collection) => (\n
  • \n \n
    \n {collection.initials}\n
    \n \n
    \n \n {collection.name}\n \n

    \n {collection.books} Books\n

    \n
    \n
    \n \n \n }\n >\n Open options\n \n \n \n View collection\n Edit collection\n \n Share collection\n \n Delete collection\n \n \n \n
    \n     \n     \n
    • \n ))}\n \n
    \n
    \n );\n}\n" } ], "categories": [ "grid-list" ] }, { "name": "grid-list-02", "type": "registry:block", "title": "Grid List with Links", "description": "A grid list with links block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "card" ], "dependencies": [], "files": [ { "path": "content/components/grid-list/grid-list-02.tsx", "type": "registry:component", "target": "components/grid-list-02.tsx", "content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Card, CardContent } from '@/components/ui/card';\n\nconst people = [\n {\n name: 'Timur Ercan',\n email: 'timur@documenso.com',\n role: 'Co-Founder / CEO',\n imageUrl: 'https://blocks.so/avatar-02.png',\n },\n {\n name: 'Lucas Smith',\n email: 'lucas@documenso.com',\n role: 'Co-Founder / CTO',\n imageUrl: 'https://blocks.so/avatar-03.png',\n },\n {\n name: 'Ephraim Duncan',\n email: 'ephraim@documenso.com',\n role: 'Software Engineer',\n imageUrl: 'https://blocks.so/avatar-01.png',\n },\n {\n name: 'Catalin Pit',\n email: 'catalin@documenso.com',\n role: 'Software Engineer',\n imageUrl: 'https://blocks.so/avatar-04.png',\n },\n];\n\nexport default function GridList02() {\n return (\n
    \n
    \n {people.map((person) => (\n \n \n \n \n {person.name.charAt(0)}\n \n \n \n \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "grid-list" ] }, { "name": "grid-list-03", "type": "registry:block", "title": "Grid List with Icons", "description": "A grid list with icons block.", "author": "ephraim duncan ", "registryDependencies": [ "card" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/grid-list/grid-list-03.tsx", "type": "registry:component", "target": "components/grid-list-03.tsx", "content": "import {\n ArrowRight,\n ArrowUpRight,\n CheckCircle,\n ContactRound,\n Hand,\n Server,\n UserCircle,\n} from 'lucide-react';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst actions = [\n {\n title: 'Getting Started',\n description:\n 'Everything you need to know to get started and get to work in ChatCloud.',\n href: '#',\n icon: ArrowRight,\n iconForeground: 'text-green-700',\n iconBackground: 'bg-green-50 dark:bg-green-950/30',\n ringColorClass: 'ring-green-700/30',\n },\n {\n title: 'Admin Settings',\n description:\n 'Learn how to manage your current workspace or your enterprise space.',\n href: '#',\n icon: UserCircle,\n iconForeground: 'text-red-700',\n iconBackground: 'bg-red-50 dark:bg-red-950/30',\n ringColorClass: 'ring-red-700/30',\n },\n {\n title: 'Server Setup',\n description:\n 'Connect, simplify, and automate. Discover the power of apps and tools.',\n href: '#',\n icon: Server,\n iconForeground: 'text-blue-700',\n iconBackground: 'bg-blue-50 dark:bg-blue-950/30',\n ringColorClass: 'ring-blue-700/30',\n },\n {\n title: 'Login and Verification',\n description:\n 'Read on to learn how to sign in with your email address, or your Apple or Google.',\n href: '#',\n icon: CheckCircle,\n iconForeground: 'text-sky-700',\n iconBackground: 'bg-sky-50 dark:bg-sky-950/30',\n ringColorClass: 'ring-sky-700/30',\n },\n {\n title: 'Account Setup',\n description:\n 'Adjust your profile and preferences to make ChatCloud work just for you.',\n href: '#',\n icon: ContactRound,\n iconForeground: 'text-pink-700',\n iconBackground: 'bg-pink-50 dark:bg-pink-950/30',\n ringColorClass: 'ring-pink-700/30',\n },\n {\n title: 'Trust & Safety',\n description:\n 'Trust on our current database and learn how we distribute your data.',\n href: '#',\n icon: Hand,\n iconForeground: 'text-orange-700',\n iconBackground: 'bg-orange-50 dark:bg-orange-950/30',\n ringColorClass: 'ring-orange-700/30',\n },\n];\n\nexport default function GridList03() {\n return (\n
    \n
    \n {actions.map((action) => (\n \n \n
    \n \n \n \n
    \n
    \n

    \n \n \n {action.title}\n \n

    \n

    \n {action.description}\n

    \n
    \n \n \n \n     \n \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "grid-list" ] }, { "name": "login-01", "type": "registry:block", "title": "Login with Email and Google", "description": "A login with email and google block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "input", "label", "separator" ], "dependencies": [], "files": [ { "path": "content/components/login/login-01.tsx", "type": "registry:component", "target": "components/login-01.tsx", "content": "import type { JSX, SVGProps } from 'react';\nimport { Button, buttonVariants } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nconst GoogleIcon = (\n props: JSX.IntrinsicAttributes & SVGProps\n) => (\n \n \n \n);\n\nexport default function Login01() {\n return (\n
    \n
    \n
    \n

    \n Log in or create account\n

    \n
    \n \n \n \n \n\n
    \n
    \n \n
    \n
    \n \n or with\n \n
    \n
    \n\n \n \n Sign in with Google\n \n\n

    \n By signing in, you agree to our{' '}\n \n terms of service\n {' '}\n and{' '}\n \n privacy policy\n \n .\n

    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-02", "type": "registry:block", "title": "Login with Email, Password and Google", "description": "A login with email, password and google block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "input", "label", "separator" ], "dependencies": [], "files": [ { "path": "content/components/login/login-02.tsx", "type": "registry:component", "target": "components/login-02.tsx", "content": "import type { JSX, SVGProps } from 'react';\nimport { Button, buttonVariants } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nconst GoogleIcon = (\n props: JSX.IntrinsicAttributes & SVGProps\n) => (\n \n \n \n);\n\nexport default function Login02() {\n return (\n
    \n
    \n
    \n

    \n Log in or create account\n

    \n
    \n
    \n \n Email\n \n \n
    \n
    \n \n Password\n \n \n
    \n \n
    \n\n
    \n
    \n \n
    \n
    \n \n or with\n \n
    \n
    \n\n \n \n Sign in with Google\n \n\n

    \n By signing in, you agree to our{' '}\n \n terms of service\n {' '}\n and{' '}\n \n privacy policy\n \n .\n

    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-03", "type": "registry:block", "title": "Login with Email and Password", "description": "A login with email and password block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "input", "label" ], "dependencies": [], "files": [ { "path": "content/components/login/login-03.tsx", "type": "registry:component", "target": "components/login-03.tsx", "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport default function Login03() {\n return (\n
    \n
    \n
    \n

    \n Welcome Back\n

    \n

    \n Enter your credentials to access your account.\n

    \n
    \n
    \n \n Email\n \n \n
    \n
    \n \n Password\n \n \n
    \n \n
    \n

    \n Forgot your password?{' '}\n \n Reset password\n \n

    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-04", "type": "registry:block", "title": "Login with Social Buttons", "description": "A login with social buttons block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "input", "label", "separator" ], "dependencies": [], "files": [ { "path": "content/components/login/login-04.tsx", "type": "registry:component", "target": "components/login-04.tsx", "content": "import type { JSX, SVGProps } from 'react';\nimport { Button, buttonVariants } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nconst GitHubIcon = (\n props: JSX.IntrinsicAttributes & SVGProps\n) => (\n \n \n \n);\n\nconst GoogleIcon = (\n props: JSX.IntrinsicAttributes & SVGProps\n) => (\n \n \n \n);\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function Login04() {\n return (\n
    \n
    \n
    \n
    \n \n

    \n Acme\n

    \n
    \n

    \n Sign in to your account\n

    \n

    \n Don't have an account?{' '}\n \n Sign up\n \n

    \n
    \n \n \n Login with GitHub\n \n \n \n Login with Google\n \n
    \n\n
    \n
    \n \n
    \n
    \n \n or\n \n
    \n
    \n\n
    \n
    \n \n Email\n \n \n
    \n
    \n \n Password\n \n \n
    \n \n
    \n

    \n Forgot your password?{' '}\n \n Reset password\n \n

    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-05", "type": "registry:block", "title": "Login Card Signup Form", "description": "A login card signup form block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "checkbox", "input", "label" ], "dependencies": [], "files": [ { "path": "content/components/login/login-05.tsx", "type": "registry:component", "target": "components/login-05.tsx", "content": "import type { JSX, SVGProps } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function Login05() {\n return (\n
    \n
    \n
    \n \n

    \n Create new account for workspace\n

    \n
    \n\n \n \n
    \n
    \n \n Name\n \n \n
    \n\n
    \n \n Email\n \n \n
    \n\n
    \n \n Password\n \n \n
    \n\n
    \n \n Confirm password\n \n \n
    \n\n
    \n
    \n \n
    \n \n Sign up to our newsletter\n \n
    \n\n \n\n

    \n By signing in, you agree to our{' '}\n \n Terms of use\n {' '}\n and{' '}\n \n Privacy policy\n \n

    \n
    \n     \n     \n\n

    \n Already have an account?{' '}\n \n Sign in\n \n

    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-06", "type": "registry:block", "title": "Login with Magic Link and SSO", "description": "A login with magic link and sso block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "input", "separator" ], "dependencies": [], "files": [ { "path": "content/components/login/login-06.tsx", "type": "registry:component", "target": "components/login-06.tsx", "content": "import type { JSX, SVGProps } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function Login06() {\n return (\n
    \n \n \n
    \n \n\n
    \n

    \n Welcome back!\n

    \n

    \n First time here?{' '}\n \n Sign up for free\n \n

    \n
    \n\n
    \n \n
    \n \n \n Sign in using password\n \n
    \n\n
    \n \n OR\n \n
    \n\n \n
    \n\n

    \n You acknowledge that you read, and agree, to our{' '}\n \n Terms of Service\n {' '}\n and our{' '}\n \n Privacy Policy\n \n .\n

    \n
    \n     \n     \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-07", "type": "registry:block", "title": "Login Full Page with Icons", "description": "A login full page with icons block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "checkbox", "input", "label", "separator" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/login/login-07.tsx", "type": "registry:component", "target": "components/login-07.tsx", "content": "'use client';\n\nimport { ArrowRight, Eye, EyeOff, Lock, Mail } from 'lucide-react';\nimport { type JSX, type SVGProps, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\nconst GoogleIcon = (\n props: JSX.IntrinsicAttributes & SVGProps\n) => (\n \n \n \n);\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function Login07() {\n const [isVisible, setIsVisible] = useState(false);\n\n const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n return (\n
    \n
    \n
    \n \n

    Welcome back

    \n

    \n Sign in to access to your dashboard, settings and projects.\n

    \n
    \n\n
    \n \n\n
    \n \n \n or sign in with email\n \n \n
    \n\n
    \n
    \n \n
    \n \n
    \n \n
    \n
    \n
    \n\n
    \n
    \n \n \n Forgot Password?\n \n
    \n
    \n \n
    \n \n
    \n \n {isVisible ? (\n \n ) : (\n \n )}\n \n
    \n
    \n\n
    \n \n \n
    \n
    \n\n \n\n
    \n No account?{' '}\n \n Create an account\n \n
    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-08", "type": "registry:block", "title": "Login with SSO", "description": "A login with sso block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "checkbox", "input", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/login/login-08.tsx", "type": "registry:component", "target": "components/login-08.tsx", "content": "'use client';\n\nimport { EyeIcon, EyeOffIcon, Key } from 'lucide-react';\nimport Link from 'next/link';\nimport { type JSX, type SVGProps, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from '@/components/ui/card';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function SignIn() {\n const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n const togglePasswordVisibility = () => setIsPasswordVisible((prev) => !prev);\n\n return (\n
    \n \n \n
    \n \n
    \n
    \n

    \n Sign in to Acme\n

    \n

    \n Welcome back! Please enter your details.\n

    \n
    \n     \n \n
    \n \n \n
    \n
    \n
    \n \n \n Reset password\n \n
    \n
    \n \n \n {isPasswordVisible ? (\n \n ) : (\n \n )}\n \n
    \n
    \n
    \n \n \n
    \n\n
    \n \n \n
    \n     \n \n

    \n New to Acme?{' '}\n \n Sign up\n \n

    \n     \n     \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "login-09", "type": "registry:block", "title": "Login Signup with Role Selection", "description": "A login signup with role selection block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "checkbox", "input", "label", "select" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/login/login-09.tsx", "type": "registry:component", "target": "components/login-09.tsx", "content": "'use client';\n\nimport { BarChart, Code, Eye, EyeOff, User } from 'lucide-react';\nimport Link from 'next/link';\nimport { type JSX, type SVGProps, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from '@/components/ui/card';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\n\nconst Logo = (props: JSX.IntrinsicAttributes & SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function SignupForm() {\n const [showPassword, setShowPassword] = useState(false);\n\n return (\n
    \n
    \n \n \n \n
    \n

    \n Create an account\n

    \n

    \n Welcome! Create an account to get started.\n

    \n
    \n     \n \n
    \n \n \n span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0\"\n id=\"role\"\n >\n \n \n span>svg]:shrink-0 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n \n \n Product Designer\n \n \n \n Developer\n \n \n \n Product Manager\n \n \n \n
    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n
    \n \n \n
    \n\n
    \n \n \n
    \n\n
    \n \n
    \n \n setShowPassword(!showPassword)}\n size=\"icon\"\n type=\"button\"\n variant=\"ghost\"\n >\n {showPassword ? (\n \n ) : (\n \n )}\n \n
    \n
    \n\n
    \n \n \n
    \n\n \n     \n \n

    \n Already have an account?{' '}\n \n Sign in\n \n

    \n     \n     \n
    \n
    \n );\n}\n" } ], "categories": [ "login" ] }, { "name": "onboarding-01", "type": "registry:block", "title": "Onboarding", "description": "A onboarding block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "collapsible", "dropdown-menu" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-01.tsx", "type": "registry:component", "target": "components/onboarding-01.tsx", "content": "'use client';\n\nimport {\n IconArchive,\n IconChevronRight,\n IconCircleCheckFilled,\n IconCircleDashed,\n IconDots,\n IconMail,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Button, buttonVariants } from '@/components/ui/button';\nimport { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { cn } from '@/lib/utils';\n\nconst steps = [\n {\n id: 'profile',\n title: 'Complete your profile',\n description:\n 'Add your name, photo, and role so your team knows who you are.',\n completed: true,\n actionLabel: 'Edit profile',\n actionHref: '#',\n },\n {\n id: 'workspace',\n title: 'Set up your workspace',\n description:\n 'Customize your workspace with a name, icon, and default settings.',\n completed: false,\n actionLabel: 'Configure workspace',\n actionHref: '#',\n },\n {\n id: 'invite',\n title: 'Invite your team',\n description:\n 'Bring your teammates on board so you can collaborate in real time.',\n completed: false,\n actionLabel: 'Send invites',\n actionHref: '#',\n },\n {\n id: 'integrations',\n title: 'Connect integrations',\n description:\n 'Link your favorite tools like Slack, GitHub, and Linear to streamline workflows.',\n completed: false,\n actionLabel: 'Browse integrations',\n actionHref: '#',\n },\n {\n id: 'workflow',\n title: 'Create your first workflow',\n description:\n 'Automate a repetitive task with a simple drag-and-drop workflow builder.',\n completed: false,\n actionLabel: 'Build workflow',\n actionHref: '#',\n },\n {\n id: 'notifications',\n title: 'Set up notifications',\n description:\n 'Choose how and when you want to be notified about updates and mentions.',\n completed: false,\n actionLabel: 'Manage notifications',\n actionHref: '#',\n },\n];\n\ninterface OnboardingStep {\n id: string;\n title: string;\n description: string;\n completed: boolean;\n actionLabel: string;\n actionHref: string;\n}\n\nfunction CircularProgress({\n completed,\n total,\n}: {\n completed: number;\n total: number;\n}) {\n const progress = total > 0 ? ((total - completed) / total) * 100 : 0;\n const strokeDashoffset = 100 - progress;\n\n return (\n \n \n \n \n );\n}\n\nfunction StepIndicator({ completed }: { completed: boolean }) {\n if (completed) {\n return (\n \n );\n }\n return (\n \n );\n}\n\nexport function Onboarding01() {\n const [currentSteps, setCurrentSteps] = useState(steps);\n const [openStepId, setOpenStepId] = useState(() => {\n const firstIncomplete = steps.find((s) => !s.completed);\n return firstIncomplete?.id ?? steps[0]?.id ?? null;\n });\n const [dismissed, setDismissed] = useState(false);\n\n const completedCount = currentSteps.filter((s) => s.completed).length;\n const remainingCount = currentSteps.length - completedCount;\n\n const handleStepClick = (stepId: string) => {\n setOpenStepId(openStepId === stepId ? null : stepId);\n };\n\n const handleStepAction = (step: OnboardingStep) => {\n const updated = currentSteps.map((s) =>\n s.id === step.id ? { ...s, completed: true } : s\n );\n setCurrentSteps(updated);\n const nextIncomplete = updated.find((s) => !s.completed);\n setOpenStepId(nextIncomplete?.id ?? null);\n };\n\n if (dismissed) {\n return (\n
    \n
    \n

    \n Checklist dismissed\n

    \n setDismissed(false)}\n >\n Show again\n \n
    \n
    \n );\n }\n\n return (\n
    \n
    \n
    \n
    \n

    \n Get started with Acme\n

    \n
    \n \n
    \n \n {completedCount}\n \n {' / '}\n \n {currentSteps.length}\n {' '}\n completed\n
    \n \n \n }\n >\n \n Options\n \n \n setDismissed(true)}>\n \n Dismiss\n \n \n window.open('mailto:support@acme.com?subject=Feedback')\n }\n >\n \n Give feedback\n \n \n \n
    \n
    \n\n
    \n {currentSteps.map((step, index) => {\n const isOpen = openStepId === step.id;\n const isFirst = index === 0;\n const prevStep = currentSteps[index - 1];\n const isPrevOpen = prevStep && openStepId === prevStep.id;\n\n const showBorderTop = !(isFirst || isOpen || isPrevOpen);\n\n return (\n \n handleStepClick(step.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleStepClick(step.id);\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n \n
    \n
    \n
    \n \n
    \n
    \n \n {step.title}\n \n \n \n

    \n {step.description}\n

    \n {\n e.stopPropagation();\n handleStepAction(step);\n }}\n >\n {step.actionLabel}\n \n     \n     \n
    \n
    \n {!isOpen && (\n \n )}\n
    \n
    \n
    \n
    \n );\n })}\n
    \n \n \n \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-02", "type": "registry:block", "title": "Onboarding Workspace Setup", "description": "A onboarding workspace setup block.", "author": "ephraim duncan ", "registryDependencies": [ "button" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-02.tsx", "type": "registry:component", "target": "components/onboarding-02.tsx", "content": "'use client';\n\nimport type { Icon } from '@tabler/icons-react';\nimport {\n IconCircleCheckFilled,\n IconFolder,\n IconPlug,\n IconRocket,\n IconUsers,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\ninterface StepData {\n title: string;\n description: string;\n icon: Icon;\n actionLabel: string;\n}\n\nconst steps: StepData[] = [\n {\n title: 'Create your workspace',\n description:\n 'Name your workspace and pick a URL. This is where your team will collaborate on everything.',\n icon: IconRocket,\n actionLabel: 'Get started',\n },\n {\n title: 'Invite your team',\n description:\n 'Add teammates by email so everyone can collaborate in real time across projects.',\n icon: IconUsers,\n actionLabel: 'Send invites',\n },\n {\n title: 'Set up your first project',\n description:\n 'Create a project to organize tasks, docs, and milestones all in one place.',\n icon: IconFolder,\n actionLabel: 'Create project',\n },\n {\n title: 'Connect your tools',\n description:\n 'Link Slack, GitHub, or Figma to keep your workflow in sync automatically.',\n icon: IconPlug,\n actionLabel: 'Browse integrations',\n },\n];\n\nfunction getIconColor(isCompleted: boolean, isActive: boolean) {\n if (isCompleted) {\n return 'text-muted-foreground/30';\n }\n if (isActive) {\n return 'text-primary';\n }\n return 'text-muted-foreground/40';\n}\n\nfunction getTitleClass(isCompleted: boolean, isActive: boolean) {\n if (isCompleted) {\n return 'text-muted-foreground/50 line-through';\n }\n if (isActive) {\n return 'text-foreground';\n }\n return 'text-muted-foreground';\n}\n\nfunction StepIndicator({\n index,\n isCompleted,\n isActive,\n}: {\n index: number;\n isCompleted: boolean;\n isActive: boolean;\n}) {\n if (isCompleted) {\n return (\n
    \n \n
    \n );\n }\n return (\n \n {index + 1}\n \n );\n}\n\nfunction StepCard({\n step,\n index,\n isCompleted,\n isActive,\n onComplete,\n}: {\n step: StepData;\n index: number;\n isCompleted: boolean;\n isActive: boolean;\n onComplete: () => void;\n}) {\n const StepIcon = step.icon;\n\n return (\n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n {step.title}\n

    \n \n {step.description}\n

    \n {isActive && (\n \n )}\n
    \n \n
    \n
    \n
    \n \n );\n}\n\nexport function Onboarding02() {\n const [completedSteps, setCompletedSteps] = useState>(\n () => new Set([0])\n );\n\n const currentStep = steps.findIndex((_, i) => !completedSteps.has(i));\n const completedCount = completedSteps.size;\n const allDone = completedCount === steps.length;\n\n const handleComplete = (index: number) => {\n setCompletedSteps((prev) => {\n const next = new Set(prev);\n next.add(index);\n return next;\n });\n };\n\n return (\n
    \n
    \n
    \n

    \n Set up your workspace\n

    \n

    \n Complete these steps to get your team up and running\n

    \n
    \n
    \n \n {allDone ? (\n \n All done 🎉\n \n ) : (\n <>\n \n {completedCount}\n {' '}\n of {steps.length} completed\n \n )}\n \n
    \n
    \n \n
    \n
    \n
    \n\n
    \n {steps.map((step, index) => (\n handleComplete(index)}\n step={step}\n />\n ))}\n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-03", "type": "registry:block", "title": "Onboarding Steps with Progress", "description": "A onboarding steps with progress block.", "author": "ephraim duncan ", "registryDependencies": [ "progress" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-03.tsx", "type": "registry:component", "target": "components/onboarding-03.tsx", "content": "'use client';\n\nimport { IconCircleCheckFilled } from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Progress } from '@/components/ui/progress';\nimport { cn } from '@/lib/utils';\n\nconst steps = [\n {\n id: '1.',\n title: 'Create your store',\n description:\n \"Choose a name, pick a subdomain, and configure your store's basic settings.\",\n },\n {\n id: '2.',\n title: 'Add your products',\n description:\n 'Upload your catalog with photos, pricing, and inventory details.',\n },\n {\n id: '3.',\n title: 'Set up payments',\n description:\n 'Connect Stripe or PayPal to start accepting orders from customers.',\n },\n {\n id: '4.',\n title: 'Launch your store',\n description: 'Review everything and publish your storefront to the world.',\n },\n];\n\nexport function Onboarding03() {\n const [activeStep, setActiveStep] = useState(0);\n\n return (\n
    \n
    \n

    Store setup

    \n

    \n Complete each step to launch your online store.\n

    \n
    \n \n Step {activeStep + 1}/{steps.length}\n \n \n
    \n
      \n {steps.map((step, index) => (\n
    • \n setActiveStep(index)}\n type=\"button\"\n >\n
      \n {index < activeStep ? (\n \n ) : (\n \n {step.id}\n \n )}\n
      \n \n {step.title}\n \n

      \n {step.description}\n

      \n
      \n
      \n \n
      • \n ))}\n
    \n
    \n

    Need help?

    \n

    \n Connect with a member of our team at{' '}\n \n help@example.com\n \n .\n

    \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-04", "type": "registry:block", "title": "Onboarding Accordion", "description": "A onboarding accordion block.", "author": "ephraim duncan ", "registryDependencies": [ "accordion", "button" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-04.tsx", "type": "registry:component", "target": "components/onboarding-04.tsx", "content": "'use client';\n\nimport {\n IconAdjustments,\n IconCalculator,\n IconChartBar,\n IconCircleCheckFilled,\n IconDatabase,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nconst steps = [\n {\n title: 'Configure your environment',\n subtitle: 'Environment ready',\n icon: IconAdjustments,\n description:\n 'Set up your development environment with API keys and preferences.',\n buttonText: 'Edit settings',\n },\n {\n title: 'Connect your database',\n subtitle: 'Add connection',\n icon: IconDatabase,\n description:\n 'Link your PostgreSQL, MySQL, or MongoDB instance to get started.',\n buttonText: 'Add database',\n },\n {\n title: 'Define your schema',\n subtitle: 'Create schema',\n icon: IconCalculator,\n description: 'Model your data with types, relations, and validation rules.',\n buttonText: 'Open editor',\n },\n {\n title: 'Build your first API',\n subtitle: 'Generate endpoints',\n icon: IconChartBar,\n description:\n 'Auto-generate REST or GraphQL endpoints from your schema in seconds.',\n buttonText: 'Generate API',\n },\n];\n\nexport function Onboarding04() {\n const [activeStep, setActiveStep] = useState(1);\n\n const [openItem, setOpenItem] = useState(\n activeStep < steps.length ? steps[activeStep].title : ''\n );\n\n const handleComplete = () => {\n const next = activeStep + 1;\n setActiveStep(next);\n setOpenItem(next < steps.length ? steps[next].title : '');\n };\n\n return (\n
    \n
    \n

    Quick start

    \n

    \n Set up your backend in four simple steps\n

    \n setOpenItem(value[0] ?? '')}\n value={openItem ? [openItem] : []}\n >\n {steps.map((step, index) => {\n let status: 'complete' | 'current' | 'upcoming' = 'upcoming';\n if (index < activeStep) {\n status = 'complete';\n } else if (index === activeStep) {\n status = 'current';\n }\n\n return (\n \n \n
    \n {status === 'complete' ? (\n \n \n \n ) : (\n \n )}\n \n {step.title}\n

    \n
    \n     \n \n
    \n
    \n \n

    \n {step.subtitle}\n

    \n

    \n {step.description}\n

    \n {status === 'complete' ? (\n \n ) : (\n {\n if (status === 'current') {\n handleComplete();\n }\n }}\n size=\"sm\"\n >\n {step.buttonText}\n \n )}\n
    \n
    \n     \n \n );\n })}\n \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-05", "type": "registry:block", "title": "Onboarding Activity Feed", "description": "A onboarding activity feed block.", "author": "ephraim duncan ", "registryDependencies": [], "dependencies": [], "files": [ { "path": "content/components/onboarding/onboarding-05.tsx", "type": "registry:component", "target": "components/onboarding-05.tsx", "content": "import { cn } from '@/lib/utils';\n\nconst steps = [\n {\n id: 1,\n type: 'created',\n description: 'Created project \"Brand Refresh\"',\n user: { name: 'Sarah K.', initial: 'S', bgColor: 'bg-violet-500' },\n activityTime: '3d ago',\n },\n {\n id: 2,\n type: 'created',\n description: 'Uploaded 12 design assets',\n user: { name: 'Marcus L.', initial: 'M', bgColor: 'bg-orange-500' },\n activityTime: '2d ago',\n },\n {\n id: 3,\n type: 'created',\n description: 'Shared prototype with stakeholders',\n user: { name: 'Sarah K.', initial: 'S', bgColor: 'bg-emerald-500' },\n activityTime: '2h ago',\n },\n {\n id: 4,\n type: 'created',\n description: 'Left feedback on homepage layout',\n user: { name: 'Jamie R.', initial: 'J', bgColor: 'bg-fuchsia-500' },\n activityTime: '5min ago',\n },\n {\n id: 5,\n type: 'in progress',\n description: 'Scheduled design review meeting',\n user: { name: 'Team Ops', initial: 'T', bgColor: 'bg-blue-500' },\n activityTime: 'today 2:30pm',\n },\n];\n\nexport function Onboarding05() {\n return (\n
    \n
    \n

    Project activity

    \n

    \n Recent updates from your team\n

    \n
      \n {steps.map((step, stepIdx) => (\n
    • \n \n \n
    \n
    \n
    \n
    \n {step.type === 'created' ? (\n
    \n ) : (\n
    \n )}\n
    \n \n {step.user.initial}\n \n
    \n

    \n {step.user.name}\n \n {' '}\n {step.description}\n \n \n {' '}\n ∙ {step.activityTime}\n \n

    \n
    \n \n ))}\n \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-06", "type": "registry:block", "title": "Onboarding Timeline", "description": "A onboarding timeline block.", "author": "ephraim duncan ", "registryDependencies": [], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-06.tsx", "type": "registry:component", "target": "components/onboarding-06.tsx", "content": "import { IconCheck } from '@tabler/icons-react';\nimport { cn } from '@/lib/utils';\n\nconst steps = [\n {\n id: 1,\n type: 'done',\n title: 'Repository connected',\n description: 'Linked GitHub repository to deployment pipeline',\n activityTime: '3d ago',\n },\n {\n id: 2,\n type: 'done',\n title: 'Build configuration set',\n description: 'Configured build commands and environment variables',\n activityTime: '2d ago',\n },\n {\n id: 3,\n type: 'done',\n title: 'Domain configured',\n description: 'Custom domain verified and SSL certificate issued',\n activityTime: '31min ago',\n },\n {\n id: 4,\n type: 'in progress',\n title: 'Running health checks',\n description: 'Verifying all endpoints respond correctly',\n activityTime: 'Running now...',\n },\n {\n id: 5,\n type: 'open',\n title: 'Go live',\n description: 'Switch traffic to the new deployment',\n activityTime: 'Upcoming',\n },\n];\n\nexport function Onboarding06() {\n return (\n
    \n
    \n

    Deployment progress

    \n
      \n {steps.map((step, stepIdx) => (\n
    • \n \n \n
    \n
    \n
    \n {step.type === 'done' ? (\n \n ) : step.type === 'in progress' ? (\n \n ) : (\n \n )}\n
    \n
    \n

    \n {step.title}{' '}\n \n ∙ {step.activityTime}\n \n

    \n

    \n {step.description}\n

    \n
    \n
    \n \n ))}\n \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "onboarding-07", "type": "registry:block", "title": "Onboarding Deploy Pipeline", "description": "A onboarding deploy pipeline block.", "author": "ephraim duncan ", "registryDependencies": [ "accordion", "button", "progress" ], "dependencies": [ "@tabler/icons-react" ], "files": [ { "path": "content/components/onboarding/onboarding-07.tsx", "type": "registry:component", "target": "components/onboarding-07.tsx", "content": "'use client';\n\nimport {\n IconCircleCheckFilled,\n IconLoader2,\n IconRefresh,\n} from '@tabler/icons-react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '@/components/ui/accordion';\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\nimport { cn } from '@/lib/utils';\n\nconst initialSteps = [\n {\n id: 1,\n type: 'created' as const,\n description: 'Export records',\n value: 100,\n createdOn: '2024-03-10 09:32',\n runTime: '12min 18s',\n },\n {\n id: 2,\n type: 'created' as const,\n description: 'Transform schema',\n value: 100,\n createdOn: '2024-03-10 10:03',\n runTime: '18min 45s',\n },\n {\n id: 3,\n type: 'in progress' as const,\n description: 'Import to new system',\n value: 45,\n createdOn: null as string | null,\n runTime: null as string | null,\n },\n];\n\nexport function Onboarding07() {\n const [steps, setSteps] = useState(initialSteps);\n const intervalRef = useRef | null>(null);\n\n const allComplete = steps.every((s) => s.value === 100);\n\n const startAnimation = useCallback(() => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n intervalRef.current = setInterval(() => {\n setSteps((prev) => {\n const next = prev.map((step) => {\n if (step.id !== 3 || step.value >= 100) {\n return step;\n }\n const increment = Math.random() * 0.8 + 0.3;\n const newValue = Math.min(step.value + increment, 100);\n if (newValue >= 100) {\n return {\n ...step,\n value: 100,\n type: 'created' as const,\n createdOn: '2024-03-10 10:47',\n runTime: '6min 32s',\n };\n }\n return { ...step, value: newValue };\n });\n if (next[2].value >= 100 && intervalRef.current) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n return next;\n });\n }, 50);\n }, []);\n\n useEffect(() => {\n startAnimation();\n return () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n };\n }, [startAnimation]);\n\n const handleRunAgain = () => {\n setSteps(initialSteps);\n startAnimation();\n };\n\n return (\n
    \n
    \n
    \n

    Data Migration

    \n \n \n \n
    \n

    \n Migrating records from your legacy system\n

    \n
    \n {steps.map((step) => (\n
    \n \n
    \n {step.value === 100 ? (\n \n ) : (\n \n )}\n

    \n {step.description}\n

    \n
    \n
    \n ))}\n
    \n \n \n \n Logs overview ({steps.length})\n \n \n
      \n {steps.map((step, stepIdx) => (\n
    • \n \n \n
    \n
    \n
    \n {step.type === 'created' ? (\n
    \n ) : (\n
    \n )}\n
    \n
    \n

    \n {step.description}\n

    \n {step.type === 'created' ? (\n

    \n Created on {step.createdOn}, Runtime: {step.runTime}\n

    \n ) : (\n

    \n 12,847 of 28,500 records processed...\n

    \n )}\n
    \n
    \n \n ))}\n \n \n \n \n
    \n
    \n );\n}\n" } ], "categories": [ "onboarding" ] }, { "name": "sidebar-01", "type": "registry:block", "title": "Sidebar Collapsible Sections", "description": "A sidebar collapsible sections block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "collapsible", "command", "dropdown-menu", "sidebar", "tooltip" ], "dependencies": [ "@tabler/icons-react", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-01/nav-footer.tsx", "type": "registry:component", "target": "components/sidebar-01/nav-footer.tsx", "content": "'use client';\n\nimport {\n BookmarkPlus,\n CircleHelp,\n LogOut,\n Plus,\n PlusCircle,\n Puzzle,\n Settings,\n User,\n} from 'lucide-react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarFooter,\n SidebarMenu,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/ui/tooltip';\n\nexport function NavFooter({\n user,\n}: {\n user: {\n name: string;\n email: string;\n avatar: string;\n };\n}) {\n return (\n \n \n \n
    \n
    \n \n }\n >\n \n CN\n \n \n \n \n Profile\n \n \n \n Settings\n \n \n \n Logout\n \n \n \n\n \n \n \n }\n />\n \n
    \n

    User Information

    \n

    \n More details about the current user or section can be\n displayed here.\n

    \n
    \n \n     \n     \n
    \n \n \n }\n >\n \n \n \n Add New\n \n \n Add New Item\n \n \n \n Add Bookmark\n \n \n \n Add Integration\n \n \n \n
    \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-01/nav-header.tsx", "type": "registry:component", "target": "components/sidebar-01/nav-header.tsx", "content": "'use client';\n\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from '@/components/ui/command';\nimport { SidebarHeader } from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport type { SidebarData } from '@/components/sidebar-01/types';\n\ninterface NavHeaderProps {\n data: SidebarData;\n}\n\nexport function NavHeader({ data }: NavHeaderProps) {\n const [open, setOpen] = React.useState(false);\n\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n setOpen((open) => !open);\n }\n };\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, []);\n\n return (\n <>\n \n setOpen(true)}\n >\n
    \n \n \n Search\n \n
    \n
    \n \n ⌘K\n \n
    \n
    \n \n\n \n \n \n \n No results found.\n \n {data.navMain.map((item) => (\n {\n setOpen(false);\n }}\n >\n \n {item.title}\n \n ))}\n \n \n \n {data.navCollapsible.favorites.map((item) => (\n {\n setOpen(false);\n }}\n >\n \n {item.title}\n \n ))}\n \n \n \n {data.navCollapsible.teams.map((item) => (\n {\n setOpen(false);\n }}\n >\n \n {item.title}\n \n ))}\n \n \n \n {data.navCollapsible.topics.map((item) => (\n {\n setOpen(false);\n }}\n >\n \n {item.title}\n \n ))}\n \n \n \n \n \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-01/types.ts", "type": "registry:file", "target": "components/sidebar-01/types.ts", "content": "import type { ElementType } from 'react';\n\nexport interface NavItem {\n id: string;\n title: string;\n icon: ElementType;\n url?: string;\n isActive?: boolean;\n}\n\nexport interface User {\n name: string;\n email: string;\n avatar: string;\n}\n\nexport interface FavoriteItem {\n id: string;\n title: string;\n href: string;\n color: string;\n}\n\nexport interface TeamItem {\n id: string;\n title: string;\n icon: ElementType;\n}\n\nexport interface TopicItem {\n id: string;\n title: string;\n icon: ElementType;\n}\n\nexport interface SidebarData {\n user: User;\n navMain: NavItem[];\n navCollapsible: {\n favorites: FavoriteItem[];\n teams: TeamItem[];\n topics: TopicItem[];\n };\n}\n" }, { "path": "content/components/sidebar/sidebar-01/nav-main.tsx", "type": "registry:component", "target": "components/sidebar-01/nav-main.tsx", "content": "'use client';\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport type { NavItem } from '@/components/sidebar-01/types';\n\nexport function NavMain({ items }: { items: NavItem[] }) {\n return (\n \n \n {items.map((item) => {\n const Icon = item.icon;\n\n return (\n \n \n {Icon && }\n {item.title}\n \n \n );\n })}\n \n \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-01/index.tsx", "type": "registry:component", "target": "components/sidebar-01/index.tsx", "content": "import {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-01/app-sidebar';\n\nexport default function Sidebar01() {\n return (\n \n \n \n
    \n
    \n \n
    \n
    \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-01/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-01/app-sidebar.tsx", "content": "'use client';\n\nimport {\n IconAd2,\n IconBellRinging,\n IconCalendar,\n IconCalendarStats,\n IconListDetails,\n IconNews,\n IconNotebook,\n IconProgressCheck,\n IconSettingsCode,\n} from '@tabler/icons-react';\nimport { LayoutDashboard, Package } from 'lucide-react';\nimport { Sidebar, SidebarContent } from '@/components/ui/sidebar';\nimport { NavCollapsible } from '@/components/sidebar-01/nav-collapsible';\nimport { NavFooter } from '@/components/sidebar-01/nav-footer';\nimport { NavHeader } from '@/components/sidebar-01/nav-header';\nimport { NavMain } from '@/components/sidebar-01/nav-main';\nimport type { SidebarData } from '@/components/sidebar-01/types';\n\nconst data: SidebarData = {\n user: {\n name: 'ephraim',\n email: 'ephraim@blocks.so',\n avatar: '/avatar-01.png',\n },\n navMain: [\n {\n id: 'overview',\n title: 'Overview',\n url: '#',\n icon: LayoutDashboard,\n isActive: true,\n },\n {\n id: 'tasks',\n title: 'Tasks',\n url: '#',\n icon: IconListDetails,\n },\n {\n id: 'meetings',\n title: 'Meetings',\n url: '#',\n icon: IconCalendarStats,\n },\n {\n id: 'notes',\n title: 'Notes',\n url: '#',\n icon: IconNotebook,\n },\n {\n id: 'calendar',\n title: 'Calendar',\n url: '#',\n icon: IconCalendar,\n },\n {\n id: 'completed',\n title: 'Completed',\n url: '#',\n icon: IconProgressCheck,\n },\n {\n id: 'notifications',\n title: 'Notifications',\n url: '#',\n icon: IconBellRinging,\n },\n ],\n navCollapsible: {\n favorites: [\n {\n id: 'design',\n title: 'Design',\n href: '#',\n color: 'bg-green-400 dark:bg-green-300',\n },\n {\n id: 'development',\n title: 'Development',\n href: '#',\n color: 'bg-blue-400 dark:bg-blue-300',\n },\n {\n id: 'workshop',\n title: 'Workshop',\n href: '#',\n color: 'bg-orange-400 dark:bg-orange-300',\n },\n {\n id: 'personal',\n title: 'Personal',\n href: '#',\n color: 'bg-red-400 dark:bg-red-300',\n },\n ],\n teams: [\n {\n id: 'engineering',\n title: 'Engineering',\n icon: IconSettingsCode,\n },\n {\n id: 'marketing',\n title: 'Marketing',\n icon: IconAd2,\n },\n ],\n topics: [\n {\n id: 'product-updates',\n title: 'Product Updates',\n icon: Package,\n },\n {\n id: 'company-news',\n title: 'Company News',\n icon: IconNews,\n },\n ],\n },\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-01/nav-collapsible.tsx", "type": "registry:component", "target": "components/sidebar-01/nav-collapsible.tsx", "content": "'use client';\nimport { ChevronDown } from 'lucide-react';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport type { FavoriteItem, TeamItem, TopicItem } from '@/components/sidebar-01/types';\n\ninterface NavCollapsibleProps {\n favorites: FavoriteItem[];\n teams: TeamItem[];\n topics: TopicItem[];\n}\n\nexport function NavCollapsible({\n favorites,\n teams,\n topics,\n}: NavCollapsibleProps) {\n return (\n
    \n {favorites && favorites.length > 0 && (\n \n \n }\n >\n Favorites\n \n \n \n \n \n {favorites.map((item) => (\n \n \n }\n >\n
    \n {item.title}\n \n \n ))}\n \n \n \n \n \n )}\n\n {[\n { label: 'Teams', items: teams },\n { label: 'Topics', items: topics },\n ].map(\n ({ label, items }) =>\n items &&\n items.length > 0 && (\n \n \n }\n >\n {label}\n \n \n \n \n \n {items.map((item) => {\n const Icon = item.icon;\n return (\n \n \n \n {item.title}\n \n \n );\n })}\n \n \n \n \n \n )\n )}\n
    \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "sidebar-02", "type": "registry:block", "title": "Sidebar Dashboard Inset", "description": "A sidebar dashboard inset block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "collapsible", "dropdown-menu", "sidebar" ], "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-02/nav-main.tsx", "type": "registry:component", "target": "components/sidebar-02/nav-main.tsx", "content": "'use client';\n\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport Link from 'next/link';\nimport type React from 'react';\nimport { useState } from 'react';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuItem as SidebarMenuSubItem,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\n\nexport type Route = {\n id: string;\n title: string;\n icon?: React.ReactNode;\n link: string;\n subs?: {\n title: string;\n link: string;\n icon?: React.ReactNode;\n }[];\n};\n\nexport default function DashboardNavigation({ routes }: { routes: Route[] }) {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n const [openCollapsible, setOpenCollapsible] = useState(null);\n\n return (\n \n {routes.map((route) => {\n const isOpen = !isCollapsed && openCollapsible === route.id;\n const hasSubRoutes = !!route.subs?.length;\n\n return (\n \n {hasSubRoutes ? (\n \n setOpenCollapsible(open ? route.id : null)\n }\n open={isOpen}\n >\n \n }\n >\n {route.icon}\n {!isCollapsed && (\n \n {route.title}\n \n )}\n {!isCollapsed && hasSubRoutes && (\n \n {isOpen ? (\n \n ) : (\n \n )}\n \n )}\n \n\n {!isCollapsed && (\n \n \n {route.subs?.map((subRoute) => (\n \n \n }\n >\n {subRoute.title}\n \n \n ))}\n \n \n )}\n     \n ) : (\n \n }\n tooltip={route.title}\n >\n {route.icon}\n {!isCollapsed && (\n \n {route.title}\n \n )}\n \n )}\n \n );\n })}\n \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-02/logo.tsx", "type": "registry:component", "target": "components/sidebar-02/logo.tsx", "content": "import type { SVGProps } from 'react';\n\nexport const Logo = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n" }, { "path": "content/components/sidebar/sidebar-02/nav-notifications.tsx", "type": "registry:component", "target": "components/sidebar-02/nav-notifications.tsx", "content": "'use client';\n\nimport { BellIcon } from 'lucide-react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\ntype Notification = {\n id: string;\n avatar: string;\n fallback: string;\n text: string;\n time: string;\n};\n\nexport function NotificationsPopover({\n notifications,\n}: {\n notifications: Notification[];\n}) {\n return (\n \n \n }\n >\n \n \n \n Notifications\n \n {notifications.map(({ id, avatar, fallback, text, time }) => (\n \n \n \n {fallback}\n \n
    \n {text}\n {time}\n
    \n     \n ))}\n \n \n View all notifications\n \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-02/index.tsx", "type": "registry:component", "target": "components/sidebar-02/index.tsx", "content": "import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';\nimport { DashboardSidebar } from '@/components/sidebar-02/app-sidebar';\n\nexport default function Sidebar02() {\n return (\n \n
    \n \n \n
    \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-02/team-switcher.tsx", "type": "registry:component", "target": "components/sidebar-02/team-switcher.tsx", "content": "'use client';\n\nimport { ChevronsUpDown, Plus } from 'lucide-react';\nimport * as React from 'react';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\n\ntype Team = {\n name: string;\n logo: React.ElementType;\n plan: string;\n};\n\nexport function TeamSwitcher({ teams }: { teams: Team[] }) {\n const { isMobile } = useSidebar();\n const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n\n if (!activeTeam) return null;\n\n const Logo = activeTeam.logo;\n\n return (\n \n \n \n \n }\n >\n
    \n \n
    \n
    \n {activeTeam.name}\n {activeTeam.plan}\n
    \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n >\n
    \n \n
    \n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
    \n \n
    \n
    Add team
    \n     \n \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-02/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-02/app-sidebar.tsx", "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport {\n Activity,\n DollarSign,\n Home,\n Infinity,\n LinkIcon,\n Package2,\n Percent,\n PieChart,\n Settings,\n ShoppingBag,\n Sparkles,\n Store,\n TrendingUp,\n Users,\n} from 'lucide-react';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarTrigger,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { Logo } from '@/components/sidebar-02/logo';\nimport type { Route } from '@/components/sidebar-02/nav-main';\nimport DashboardNavigation from '@/components/sidebar-02/nav-main';\nimport { NotificationsPopover } from '@/components/sidebar-02/nav-notifications';\nimport { TeamSwitcher } from '@/components/sidebar-02/team-switcher';\n\nconst sampleNotifications = [\n {\n id: '1',\n avatar: '/avatars/01.png',\n fallback: 'OM',\n text: 'New order received.',\n time: '10m ago',\n },\n {\n id: '2',\n avatar: '/avatars/02.png',\n fallback: 'JL',\n text: 'Server upgrade completed.',\n time: '1h ago',\n },\n {\n id: '3',\n avatar: '/avatars/03.png',\n fallback: 'HH',\n text: 'New user signed up.',\n time: '2h ago',\n },\n];\n\nconst dashboardRoutes: Route[] = [\n {\n id: 'home',\n title: 'Home',\n icon: ,\n link: '#',\n },\n {\n id: 'products',\n title: 'Products',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Catalogue',\n link: '#',\n icon: ,\n },\n {\n title: 'Checkout Links',\n link: '#',\n icon: ,\n },\n {\n title: 'Discounts',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'usage-billing',\n title: 'Usage Billing',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Meters',\n link: '#',\n icon: ,\n },\n {\n title: 'Events',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'benefits',\n title: 'Benefits',\n icon: ,\n link: '#',\n },\n {\n id: 'customers',\n title: 'Customers',\n icon: ,\n link: '#',\n },\n {\n id: 'sales',\n title: 'Sales',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Orders',\n link: '#',\n icon: ,\n },\n {\n title: 'Subscriptions',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'storefront',\n title: 'Storefront',\n icon: ,\n link: '#',\n },\n {\n id: 'analytics',\n title: 'Analytics',\n icon: ,\n link: '#',\n },\n {\n id: 'finance',\n title: 'Finance',\n icon: ,\n link: '#',\n subs: [\n { title: 'Incoming', link: '#' },\n { title: 'Outgoing', link: '#' },\n { title: 'Payout Account', link: '#' },\n ],\n },\n {\n id: 'settings',\n title: 'Settings',\n icon: ,\n link: '#',\n subs: [\n { title: 'General', link: '#' },\n { title: 'Webhooks', link: '#' },\n { title: 'Custom Fields', link: '#' },\n ],\n },\n];\n\nconst teams = [\n { id: '1', name: 'Alpha Inc.', logo: Logo, plan: 'Free' },\n { id: '2', name: 'Beta Corp.', logo: Logo, plan: 'Free' },\n { id: '3', name: 'Gamma Tech', logo: Logo, plan: 'Free' },\n];\n\nexport function DashboardSidebar() {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n\n return (\n \n \n \n \n {!isCollapsed && (\n \n Acme\n \n )}\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "sidebar-03", "type": "registry:block", "title": "Sidebar Dashboard Floating", "description": "A sidebar dashboard floating block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "button", "collapsible", "dropdown-menu", "sidebar" ], "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-03/nav-main.tsx", "type": "registry:component", "target": "components/sidebar-03/nav-main.tsx", "content": "'use client';\n\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport Link from 'next/link';\nimport type React from 'react';\nimport { useState } from 'react';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuItem as SidebarMenuSubItem,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\n\nexport type Route = {\n id: string;\n title: string;\n icon?: React.ReactNode;\n link: string;\n subs?: {\n title: string;\n link: string;\n icon?: React.ReactNode;\n }[];\n};\n\nexport default function DashboardNavigation({ routes }: { routes: Route[] }) {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n const [openCollapsible, setOpenCollapsible] = useState(null);\n\n return (\n \n {routes.map((route) => {\n const isOpen = !isCollapsed && openCollapsible === route.id;\n const hasSubRoutes = !!route.subs?.length;\n\n return (\n \n {hasSubRoutes ? (\n \n setOpenCollapsible(open ? route.id : null)\n }\n open={isOpen}\n >\n \n }\n >\n {route.icon}\n {!isCollapsed && (\n \n {route.title}\n \n )}\n {!isCollapsed && hasSubRoutes && (\n \n {isOpen ? (\n \n ) : (\n \n )}\n \n )}\n \n\n {!isCollapsed && (\n \n \n {route.subs?.map((subRoute) => (\n \n \n }\n >\n {subRoute.title}\n \n \n ))}\n \n \n )}\n \n ) : (\n \n }\n tooltip={route.title}\n >\n {route.icon}\n {!isCollapsed && (\n \n {route.title}\n \n )}\n \n )}\n \n );\n })}\n \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-03/logo.tsx", "type": "registry:component", "target": "components/sidebar-03/logo.tsx", "content": "import type { SVGProps } from 'react';\n\nexport const Logo = (props: SVGProps) => (\n \n Logo\n \n \n \n \n \n \n \n \n \n \n \n \n);\n" }, { "path": "content/components/sidebar/sidebar-03/nav-notifications.tsx", "type": "registry:component", "target": "components/sidebar-03/nav-notifications.tsx", "content": "'use client';\n\nimport { BellIcon } from 'lucide-react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\ntype Notification = {\n id: string;\n avatar: string;\n fallback: string;\n text: string;\n time: string;\n};\n\nexport function NotificationsPopover({\n notifications,\n}: {\n notifications: Notification[];\n}) {\n return (\n \n \n }\n >\n \n \n \n Notifications\n \n {notifications.map(({ id, avatar, fallback, text, time }) => (\n \n \n \n {fallback}\n \n
    \n {text}\n {time}\n
    \n     \n ))}\n \n \n View all notifications\n \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-03/index.tsx", "type": "registry:component", "target": "components/sidebar-03/index.tsx", "content": "import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';\nimport { DashboardSidebar } from '@/components/sidebar-03/app-sidebar';\n\nexport default function Sidebar03() {\n return (\n \n
    \n \n \n
    \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-03/team-switcher.tsx", "type": "registry:component", "target": "components/sidebar-03/team-switcher.tsx", "content": "'use client';\n\nimport { ChevronsUpDown, Plus } from 'lucide-react';\nimport * as React from 'react';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\n\ntype Team = {\n name: string;\n logo: React.ElementType;\n plan: string;\n};\n\nexport function TeamSwitcher({ teams }: { teams: Team[] }) {\n const { isMobile } = useSidebar();\n const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n\n if (!activeTeam) return null;\n\n const Logo = activeTeam.logo;\n\n return (\n \n \n \n \n }\n >\n
    \n \n
    \n
    \n {activeTeam.name}\n {activeTeam.plan}\n
    \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n >\n
    \n \n
    \n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
    \n \n
    \n
    Add team
    \n     \n \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-03/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-03/app-sidebar.tsx", "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport {\n Activity,\n DollarSign,\n Home,\n Infinity,\n LinkIcon,\n Package2,\n Percent,\n PieChart,\n Settings,\n ShoppingBag,\n Sparkles,\n Store,\n TrendingUp,\n Users,\n} from 'lucide-react';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarTrigger,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { Logo } from '@/components/sidebar-03/logo';\nimport type { Route } from '@/components/sidebar-03/nav-main';\nimport DashboardNavigation from '@/components/sidebar-03/nav-main';\nimport { NotificationsPopover } from '@/components/sidebar-03/nav-notifications';\nimport { TeamSwitcher } from '@/components/sidebar-03/team-switcher';\n\nconst sampleNotifications = [\n {\n id: '1',\n avatar: '/avatars/01.png',\n fallback: 'OM',\n text: 'New order received.',\n time: '10m ago',\n },\n {\n id: '2',\n avatar: '/avatars/02.png',\n fallback: 'JL',\n text: 'Server upgrade completed.',\n time: '1h ago',\n },\n {\n id: '3',\n avatar: '/avatars/03.png',\n fallback: 'HH',\n text: 'New user signed up.',\n time: '2h ago',\n },\n];\n\nconst dashboardRoutes: Route[] = [\n {\n id: 'home',\n title: 'Home',\n icon: ,\n link: '#',\n },\n {\n id: 'products',\n title: 'Products',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Catalogue',\n link: '#',\n icon: ,\n },\n {\n title: 'Checkout Links',\n link: '#',\n icon: ,\n },\n {\n title: 'Discounts',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'usage-billing',\n title: 'Usage Billing',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Meters',\n link: '#',\n icon: ,\n },\n {\n title: 'Events',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'benefits',\n title: 'Benefits',\n icon: ,\n link: '#',\n },\n {\n id: 'customers',\n title: 'Customers',\n icon: ,\n link: '#',\n },\n {\n id: 'sales',\n title: 'Sales',\n icon: ,\n link: '#',\n subs: [\n {\n title: 'Orders',\n link: '#',\n icon: ,\n },\n {\n title: 'Subscriptions',\n link: '#',\n icon: ,\n },\n ],\n },\n {\n id: 'storefront',\n title: 'Storefront',\n icon: ,\n link: '#',\n },\n {\n id: 'analytics',\n title: 'Analytics',\n icon: ,\n link: '#',\n },\n {\n id: 'finance',\n title: 'Finance',\n icon: ,\n link: '#',\n subs: [\n { title: 'Incoming', link: '#' },\n { title: 'Outgoing', link: '#' },\n { title: 'Payout Account', link: '#' },\n ],\n },\n {\n id: 'settings',\n title: 'Settings',\n icon: ,\n link: '#',\n subs: [\n { title: 'General', link: '#' },\n { title: 'Webhooks', link: '#' },\n { title: 'Custom Fields', link: '#' },\n ],\n },\n];\n\nconst teams = [\n { id: '1', name: 'Alpha Inc.', logo: Logo, plan: 'Free' },\n { id: '2', name: 'Beta Corp.', logo: Logo, plan: 'Free' },\n { id: '3', name: 'Gamma Tech', logo: Logo, plan: 'Free' },\n];\n\nexport function DashboardSidebar() {\n const { state } = useSidebar();\n const isCollapsed = state === 'collapsed';\n\n return (\n \n \n \n \n {!isCollapsed && (\n \n Acme\n \n )}\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "sidebar-04", "type": "registry:block", "title": "Sidebar Double-Sided Mail", "description": "A sidebar double-sided mail block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "dropdown-menu", "sidebar" ], "dependencies": [ "@tabler/icons-react", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-04/mail-context.tsx", "type": "registry:component", "target": "components/sidebar-04/mail-context.tsx", "content": "'use client';\n\nimport * as React from 'react';\n\nexport type Mail = {\n name: string;\n email: string;\n subject: string;\n date: string;\n teaser: string;\n labels?: string[];\n};\n\ntype MailContextValue = {\n selectedMail: Mail | null;\n setSelectedMail: (mail: Mail | null) => void;\n};\n\nconst MailContext = React.createContext(\n undefined\n);\n\nexport function MailProvider({ children }: { children: React.ReactNode }) {\n const [selectedMail, setSelectedMail] = React.useState(null);\n const value = React.useMemo(\n () => ({ selectedMail, setSelectedMail }),\n [selectedMail]\n );\n return {children};\n}\n\nexport function useMail() {\n const ctx = React.useContext(MailContext);\n if (!ctx) throw new Error('useMail must be used within MailProvider');\n return ctx;\n}\n" }, { "path": "content/components/sidebar/sidebar-04/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-04/app-sidebar.tsx", "content": "'use client';\n\nimport {\n IconBrandAmongUs,\n IconCarambola,\n IconHourglassHigh,\n IconMailbox,\n} from '@tabler/icons-react';\nimport { Archive, Flag } from 'lucide-react';\nimport * as React from 'react';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\nimport { useMail } from '@/components/sidebar-04/mail-context';\nimport { NavUser } from '@/components/sidebar-04/nav-user';\n\n// This is sample data\nconst data = {\n user: {\n name: 'ephraim',\n email: 'ephraim@blocks.so',\n avatar: '/avatar-01.png',\n },\n navMain: [\n {\n title: 'Inbox',\n url: '#',\n icon: IconMailbox,\n isActive: true,\n },\n {\n title: 'Starred',\n url: '#',\n icon: IconCarambola,\n isActive: false,\n },\n {\n title: 'Important',\n url: '#',\n icon: Flag,\n isActive: false,\n },\n {\n title: 'Scheduled',\n url: '#',\n icon: IconHourglassHigh,\n isActive: false,\n },\n {\n title: 'Archive',\n url: '#',\n icon: Archive,\n isActive: false,\n },\n ],\n labels: [\n { title: 'Personal', color: 'bg-green-400 dark:bg-green-300' },\n { title: 'Work', color: 'bg-blue-400 dark:bg-blue-300' },\n { title: 'Travel', color: 'bg-orange-400 dark:bg-orange-300' },\n { title: 'Receipts', color: 'bg-purple-400 dark:bg-purple-300' },\n ],\n mails: [\n {\n name: 'Nora Patel',\n email: 'nora@acme.co',\n subject: 'Welcome to Acme Mail',\n date: '08:15 AM',\n teaser:\n \"Hi there — here's a quick tour of your new inbox.\\nPin, label, and schedule messages to stay organized.\",\n },\n {\n name: 'Stripe',\n email: 'no-reply@stripe.com',\n subject: 'Your payout has arrived',\n date: 'Yesterday',\n teaser:\n 'A payout of $3,245.90 was sent to your bank account.\\nView details in your dashboard.',\n },\n {\n name: 'GitHub',\n email: 'noreply@github.com',\n subject: 'New activity on acme/app',\n date: 'Tue',\n teaser:\n '3 pull requests need your review. CI passed on main.\\nClick to open the review queue.',\n },\n {\n name: 'Ava Chen',\n email: 'ava.chen@example.com',\n subject: 'Agenda for Friday standup',\n date: 'Mon',\n teaser:\n \"Let's cover onboarding, billing bugs, and Q4 goals.\\nReply with anything you want to add.\",\n },\n {\n name: 'Figma',\n email: 'updates@figma.com',\n subject: \"What's new in Figma\",\n date: 'Sep 12',\n teaser:\n 'Variables, auto layout improvements, and dev mode updates.\\nWatch the recap to learn more.',\n },\n {\n name: 'Linear',\n email: 'bot@linear.app',\n subject: '[ACME-432] Edit modal broken',\n date: 'Sep 11',\n teaser:\n 'Issue created by Wendy. Repro steps included.\\nSeverity: high, priority: P1.',\n },\n {\n name: 'Airbnb',\n email: 'booking@airbnb.com',\n subject: 'Your trip to Kyoto',\n date: 'Sep 10',\n teaser:\n 'Get ready for your stay. Check-in details and local recommendations inside.',\n },\n {\n name: 'Notion',\n email: 'team@notion.so',\n subject: 'Weekly team recap',\n date: 'Sep 09',\n teaser:\n 'Marketing shipped pricing page revamp. Eng closed 14 issues.\\nSee full notes in the doc.',\n },\n {\n name: 'Google Calendar',\n email: 'calendar@google.com',\n subject: 'Design sync moved',\n date: 'Sep 09',\n teaser:\n \"Event 'Design sync' moved to 3:30 PM. Meet link updated in the invite.\",\n },\n {\n name: 'HN Daily',\n email: 'digest@ycombinator.com',\n subject: 'Top stories today',\n date: 'Sep 08',\n teaser:\n 'OpenAI releases new API, SQLite 3.46, and why we left Kubernetes.\\nRead the full digest.',\n },\n ],\n};\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n // Note: I'm using state to show active item.\n // IRL you should use the url/router.\n const [activeItem, setActiveItem] = React.useState(data.navMain[0]);\n const [mails, setMails] = React.useState(data.mails);\n const [query, setQuery] = React.useState('');\n const { setOpen } = useSidebar();\n const { setSelectedMail } = useMail();\n\n const filteredMails = React.useMemo(() => {\n const q = query.trim().toLowerCase();\n if (!q) return mails;\n return mails.filter((m) =>\n [m.name, m.email, m.subject, m.teaser]\n .join('\\n')\n .toLowerCase()\n .includes(q)\n );\n }, [mails, query]);\n\n return (\n
    \n {/* This is the first sidebar */}\n \n \n \n \n }\n size=\"lg\"\n >\n
    \n \n
    \n
    \n Acme Inc\n Enterprise\n
    \n \n     \n     \n     \n \n \n \n \n {data.navMain.map((item) => (\n \n {\n setActiveItem(item);\n const mail = data.mails.sort(() => Math.random() - 0.5);\n setMails(\n mail.slice(\n 0,\n Math.max(5, Math.floor(Math.random() * 10) + 1)\n )\n );\n setOpen(true);\n }}\n >\n \n {item.title}\n \n \n ))}\n \n \n \n \n \n Labels\n \n \n \n {data.labels.map((label) => (\n \n }\n >\n
    \n {label.title}\n \n \n ))}\n \n \n \n \n \n \n \n \n\n {/* This is the second sidebar */}\n {/* We disable collapsible and let it fill remaining space */}\n \n \n
    \n
    \n {activeItem?.title}\n
    \n
    \n setQuery(e.target.value)}\n placeholder=\"Type to search...\"\n value={query}\n />\n     \n \n \n \n {filteredMails.length === 0 && (\n
    \n No results\n
    \n )}\n {filteredMails.map((mail) => (\n {\n e.preventDefault();\n setSelectedMail(mail);\n }}\n >\n
    \n {mail.name}{' '}\n {mail.date}\n
    \n {mail.subject}\n \n {mail.teaser}\n \n \n ))}\n     \n     \n     \n \n
    \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-04/nav-user.tsx", "type": "registry:component", "target": "components/sidebar-04/nav-user.tsx", "content": "'use client';\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-react';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string;\n email: string;\n avatar: string;\n };\n}) {\n const { isMobile } = useSidebar();\n\n return (\n \n \n \n \n }\n >\n \n \n CN\n \n
    \n {user.name}\n {user.email}\n
    \n \n \n \n \n
    \n \n \n CN\n \n
    \n {user.name}\n {user.email}\n
    \n
    \n     \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-04/app/page.tsx", "type": "registry:page", "target": "app/page.tsx", "content": "'use client';\n\nimport { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-04/app-sidebar';\nimport { MailProvider, useMail } from '@/components/sidebar-04/mail-context';\n\nfunction MailPreview() {\n const { selectedMail } = useMail();\n if (!selectedMail) {\n return (\n
    \n Select an email to preview\n
    \n );\n }\n return (\n
    \n
    \n
    {selectedMail.subject}
    \n
    \n From: {selectedMail.name} ({selectedMail.email})\n
    \n
    \n
    {`${selectedMail.teaser}\\n\\nThis is a sample message body for the selected email.\\nIt demonstrates the preview area on the right side.`}
    \n
    \n );\n}\n\nexport default function Page() {\n return (\n \n \n
    \n \n \n
    \n \n
    \n     \n
    \n     \n     \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "sidebar-05", "type": "registry:block", "title": "Sidebar Double-Sided", "description": "A sidebar double-sided block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "dropdown-menu", "sidebar" ], "dependencies": [ "@tabler/icons-react", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-05/team-switcher.tsx", "type": "registry:component", "target": "components/sidebar-05/team-switcher.tsx", "content": "'use client';\n\nimport { ChevronsUpDown, Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string;\n logo: React.ElementType;\n plan: string;\n }[];\n}) {\n const { isMobile } = useSidebar();\n const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n\n if (!activeTeam) {\n return null;\n }\n\n return (\n \n \n \n \n }\n >\n
    \n \n
    \n
    \n {activeTeam.name}\n {activeTeam.plan}\n
    \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n >\n
    \n \n
    \n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
    \n \n
    \n
    Add team
    \n     \n \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-05/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-05/app-sidebar.tsx", "content": "'use client';\n\nimport {\n IconActivityHeartbeat,\n IconArchive,\n IconBackground,\n IconBellRinging,\n IconBrandGoogle,\n IconBrandMeta,\n IconBrandNpm,\n IconBrandOpenai,\n IconBug,\n IconChartBar,\n IconChevronRight,\n IconCloud,\n IconDatabase,\n IconFileText,\n IconFolder,\n IconFolders,\n IconGitCommit,\n IconGitMerge,\n IconGitPullRequest,\n IconHome,\n IconKey,\n IconLockExclamation,\n IconLockPassword,\n IconLogout,\n IconNorthStar,\n IconPackageExport,\n IconPackages,\n IconPasswordFingerprint,\n IconPlayerPlay,\n IconScanEye,\n IconSettings,\n IconShieldLock,\n IconStar,\n IconTarget,\n IconTerminal2,\n IconUser,\n IconUserPlus,\n IconWebhook,\n IconX,\n} from '@tabler/icons-react';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { TeamSwitcher } from '@/components/sidebar-05/team-switcher';\n\nconst data = {\n teams: [\n {\n name: 'OpenAI',\n logo: IconBrandOpenai,\n plan: 'Enterprise',\n },\n {\n name: 'Anthropic',\n logo: IconNorthStar,\n plan: 'Pro',\n },\n {\n name: 'Google',\n logo: IconBrandGoogle,\n plan: 'Free',\n },\n {\n name: 'Meta',\n logo: IconBrandMeta,\n plan: 'Free',\n },\n ],\n};\n\ninterface SidebarItem {\n id: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n badge?: string;\n route?: string;\n subItems?: {\n id: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n description?: string;\n route?: string;\n }[];\n}\n\nconst sidebarItems: SidebarItem[] = [\n {\n id: 'overview',\n label: 'Overview',\n icon: IconHome,\n subItems: [\n {\n id: 'dashboard',\n label: 'Dashboard',\n icon: IconChartBar,\n description: 'Project overview and activity',\n route: '/overview/dashboard',\n },\n {\n id: 'activity',\n label: 'Activity',\n icon: IconActivityHeartbeat,\n description: 'Recent commits and changes',\n route: '/overview/activity',\n },\n {\n id: 'insights',\n label: 'Insights',\n icon: IconTarget,\n description: 'Code analytics and metrics',\n route: '/overview/insights',\n },\n ],\n },\n {\n id: 'repositories',\n label: 'Repositories',\n icon: IconFolders,\n badge: '12',\n subItems: [\n {\n id: 'all-repos',\n label: 'All Repositories',\n icon: IconFolder,\n description: 'Browse all your repositories',\n route: '/repositories',\n },\n {\n id: 'starred',\n label: 'Starred',\n icon: IconStar,\n description: 'Your starred repositories',\n route: '/repositories/starred',\n },\n {\n id: 'archived',\n label: 'Archived',\n icon: IconArchive,\n description: 'Archived repositories',\n route: '/repositories/archived',\n },\n ],\n },\n {\n id: 'pull-requests',\n label: 'Pull Requests',\n icon: IconGitPullRequest,\n badge: '3',\n subItems: [\n {\n id: 'open-prs',\n label: 'Open',\n icon: IconGitPullRequest,\n description: 'Open pull requests',\n route: '/pull-requests/open',\n },\n {\n id: 'review-requests',\n label: 'Review Requests',\n icon: IconScanEye,\n description: 'PRs awaiting your review',\n route: '/pull-requests/review',\n },\n {\n id: 'merged',\n label: 'Merged',\n icon: IconGitMerge,\n description: 'Recently merged PRs',\n route: '/pull-requests/merged',\n },\n ],\n },\n {\n id: 'issues',\n label: 'Issues',\n icon: IconBug,\n badge: '7',\n subItems: [\n {\n id: 'open-issues',\n label: 'Open Issues',\n icon: IconBug,\n description: 'Active issues and bugs',\n route: '/issues/open',\n },\n {\n id: 'assigned',\n label: 'Assigned to Me',\n icon: IconUserPlus,\n description: 'Issues assigned to you',\n route: '/issues/assigned',\n },\n {\n id: 'created',\n label: 'Created by Me',\n icon: IconGitCommit,\n description: \"Issues you've created\",\n route: '/issues/created',\n },\n ],\n },\n {\n id: 'actions',\n label: 'Actions',\n icon: IconBackground,\n subItems: [\n {\n id: 'workflows',\n label: 'Workflows',\n icon: IconPlayerPlay,\n description: 'CI/CD workflows and pipelines',\n route: '/actions/workflows',\n },\n {\n id: 'runners',\n label: 'Runners',\n icon: IconTerminal2,\n description: 'Self-hosted runners',\n route: '/actions/runners',\n },\n {\n id: 'deployments',\n label: 'Deployments',\n icon: IconCloud,\n description: 'Deployment history',\n route: '/actions/deployments',\n },\n ],\n },\n {\n id: 'packages',\n label: 'Packages',\n icon: IconPackages,\n subItems: [\n {\n id: 'published',\n label: 'Published',\n icon: IconPackageExport,\n description: 'Your published packages',\n route: '/packages/published',\n },\n {\n id: 'container-registry',\n label: 'Container Registry',\n icon: IconDatabase,\n description: 'Docker images and containers',\n route: '/packages/containers',\n },\n {\n id: 'npm-packages',\n label: 'npm Packages',\n icon: IconBrandNpm,\n description: 'Node.js packages',\n route: '/packages/npm',\n },\n ],\n },\n {\n id: 'security',\n label: 'Security',\n icon: IconLockPassword,\n badge: '2',\n subItems: [\n {\n id: 'alerts',\n label: 'Security Alerts',\n icon: IconLockExclamation,\n description: 'Vulnerability alerts',\n route: '/security/alerts',\n },\n {\n id: 'advisories',\n label: 'Advisories',\n icon: IconShieldLock,\n description: 'Security advisories',\n route: '/security/advisories',\n },\n {\n id: 'secrets',\n label: 'Secrets',\n icon: IconPasswordFingerprint,\n description: 'Repository secrets',\n route: '/security/secrets',\n },\n ],\n },\n {\n id: 'settings',\n label: 'Settings',\n icon: IconSettings,\n subItems: [\n {\n id: 'profile',\n label: 'Profile',\n icon: IconUser,\n description: 'Your profile settings',\n route: '/settings/profile',\n },\n {\n id: 'notifications',\n label: 'Notifications',\n icon: IconBellRinging,\n description: 'Notification preferences',\n route: '/settings/notifications',\n },\n {\n id: 'webhooks',\n label: 'Webhooks',\n icon: IconWebhook,\n description: 'Webhook configurations',\n route: '/settings/webhooks',\n },\n {\n id: 'api-keys',\n label: 'API Keys',\n icon: IconKey,\n description: 'Personal access tokens',\n route: '/settings/api-keys',\n },\n ],\n },\n {\n id: 'docs',\n label: 'Documentation',\n icon: IconFileText,\n route: '/docs',\n },\n];\n\nexport function AppSidebar() {\n const [activeItem, setActiveItem] = useState('overview');\n const [selectedSubItem, setSelectedSubItem] = useState(null);\n\n const activeItemData = sidebarItems.find((item) => item.id === activeItem);\n\n const handleItemClick = (item: SidebarItem) => {\n if (item.subItems) {\n const isActive = activeItem === item.id;\n setActiveItem(isActive ? null : item.id);\n if (isActive) {\n setSelectedSubItem(null);\n }\n } else {\n if (activeItem) {\n setActiveItem(null);\n setSelectedSubItem(null);\n }\n console.log(`[v0] Navigating to: ${item.route}`);\n }\n };\n\n const handleSubItemClick = (subItem: { id: string; route?: string }) => {\n setSelectedSubItem(selectedSubItem === subItem.id ? null : subItem.id);\n if (subItem.route) {\n console.log(`[v0] Navigating to: ${subItem.route}`);\n }\n };\n\n return (\n
    \n \n \n \n \n\n \n \n \n \n {sidebarItems.map((item) => {\n const Icon = item.icon;\n const isActive = activeItem === item.id;\n const chevronIndicator = (\n \n );\n\n return (\n \n handleItemClick(item)}\n >\n
    \n \n {item.label}\n
    \n
    \n {(item.badge || item.subItems) &&\n (item.badge ? (\n \n {item.badge}\n {item.subItems && chevronIndicator}\n \n ) : (\n chevronIndicator\n ))}\n
    \n \n     \n );\n })}\n     \n     \n     \n     \n\n \n \n \n \n
    \n \n \n E\n \n
    \n
    ephraim
    \n
    \n ephraim@blocks.so\n
    \n
    \n
    \n \n     \n     \n     \n     \n \n\n {activeItem && activeItemData?.subItems && (\n \n \n

    {activeItemData.label}

    \n setActiveItem(null)}\n >\n \n \n     \n\n \n \n \n \n {activeItemData.subItems.map((subItem) => {\n const SubIcon = subItem.icon;\n const isSelected = selectedSubItem === subItem.id;\n\n return (\n \n handleSubItemClick(subItem)}\n >\n \n\n
    \n
    {subItem.label}
    \n {subItem.description && (\n
    \n {subItem.description}\n
    \n )}\n
    \n \n     \n );\n })}\n     \n     \n     \n     \n \n )}\n
    \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-05/app/page.tsx", "type": "registry:page", "target": "app/page.tsx", "content": "'use client';\n\nimport { SidebarProvider } from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-05/app-sidebar';\n\nexport default function Page() {\n return (\n \n
    \n \n
    \n     \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "sidebar-06", "type": "registry:block", "title": "Sidebar Replacement", "description": "A sidebar replacement block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "dropdown-menu", "sidebar" ], "dependencies": [ "@tabler/icons-react", "lucide-react" ], "files": [ { "path": "content/components/sidebar/sidebar-06/team-switcher.tsx", "type": "registry:component", "target": "components/sidebar-06/team-switcher.tsx", "content": "'use client';\n\nimport { ChevronsUpDown, Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/components/ui/sidebar';\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string;\n logo: React.ElementType;\n plan: string;\n }[];\n}) {\n const { isMobile } = useSidebar();\n const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n\n if (!activeTeam) {\n return null;\n }\n\n return (\n \n \n \n \n }\n >\n
    \n \n
    \n
    \n {activeTeam.name}\n {activeTeam.plan}\n
    \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n >\n
    \n \n
    \n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
    \n \n
    \n
    Add team
    \n     \n \n     \n     \n     \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-06/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-06/app-sidebar.tsx", "content": "'use client';\n\nimport {\n IconActivityHeartbeat,\n IconArchive,\n IconArrowLeft,\n IconBackground,\n IconBellRinging,\n IconBrandGoogle,\n IconBrandMeta,\n IconBrandNpm,\n IconBrandOpenai,\n IconBug,\n IconChartBar,\n IconChevronRight,\n IconCloud,\n IconDatabase,\n IconFileText,\n IconFolder,\n IconFolders,\n IconGitCommit,\n IconGitMerge,\n IconGitPullRequest,\n IconHome,\n IconKey,\n IconLockExclamation,\n IconLockPassword,\n IconLogout,\n IconNorthStar,\n IconPackageExport,\n IconPackages,\n IconPasswordFingerprint,\n IconPlayerPlay,\n IconScanEye,\n IconSettings,\n IconShieldLock,\n IconStar,\n IconTarget,\n IconTerminal2,\n IconUser,\n IconUserPlus,\n IconWebhook,\n} from '@tabler/icons-react';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport { cn } from '@/lib/utils';\nimport { TeamSwitcher } from '@/components/sidebar-06/team-switcher';\n\nconst data = {\n teams: [\n {\n name: 'OpenAI',\n logo: IconBrandOpenai,\n plan: 'Enterprise',\n },\n {\n name: 'Anthropic',\n logo: IconNorthStar,\n plan: 'Pro',\n },\n {\n name: 'Google',\n logo: IconBrandGoogle,\n plan: 'Free',\n },\n {\n name: 'Meta',\n logo: IconBrandMeta,\n plan: 'Free',\n },\n ],\n};\n\ninterface SidebarItem {\n id: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n badge?: string;\n route?: string;\n subItems?: {\n id: string;\n label: string;\n icon: React.ComponentType<{ className?: string }>;\n route?: string;\n }[];\n}\n\nconst sidebarItems: SidebarItem[] = [\n {\n id: 'overview',\n label: 'Overview',\n icon: IconHome,\n subItems: [\n {\n id: 'dashboard',\n label: 'Dashboard',\n icon: IconChartBar,\n route: '/overview/dashboard',\n },\n {\n id: 'activity',\n label: 'Activity',\n icon: IconActivityHeartbeat,\n route: '/overview/activity',\n },\n {\n id: 'insights',\n label: 'Insights',\n icon: IconTarget,\n route: '/overview/insights',\n },\n ],\n },\n {\n id: 'repositories',\n label: 'Repositories',\n icon: IconFolders,\n badge: '12',\n subItems: [\n {\n id: 'all-repos',\n label: 'All Repositories',\n icon: IconFolder,\n route: '/repositories',\n },\n {\n id: 'starred',\n label: 'Starred',\n icon: IconStar,\n route: '/repositories/starred',\n },\n {\n id: 'archived',\n label: 'Archived',\n icon: IconArchive,\n route: '/repositories/archived',\n },\n ],\n },\n {\n id: 'pull-requests',\n label: 'Pull Requests',\n icon: IconGitPullRequest,\n badge: '3',\n subItems: [\n {\n id: 'open-prs',\n label: 'Open',\n icon: IconGitPullRequest,\n route: '/pull-requests/open',\n },\n {\n id: 'review-requests',\n label: 'Review Requests',\n icon: IconScanEye,\n route: '/pull-requests/review',\n },\n {\n id: 'merged',\n label: 'Merged',\n icon: IconGitMerge,\n route: '/pull-requests/merged',\n },\n ],\n },\n {\n id: 'issues',\n label: 'Issues',\n icon: IconBug,\n badge: '7',\n subItems: [\n {\n id: 'open-issues',\n label: 'Open Issues',\n icon: IconBug,\n route: '/issues/open',\n },\n {\n id: 'assigned',\n label: 'Assigned to Me',\n icon: IconUserPlus,\n route: '/issues/assigned',\n },\n {\n id: 'created',\n label: 'Created by Me',\n icon: IconGitCommit,\n route: '/issues/created',\n },\n ],\n },\n {\n id: 'actions',\n label: 'Actions',\n icon: IconBackground,\n subItems: [\n {\n id: 'workflows',\n label: 'Workflows',\n icon: IconPlayerPlay,\n route: '/actions/workflows',\n },\n {\n id: 'runners',\n label: 'Runners',\n icon: IconTerminal2,\n route: '/actions/runners',\n },\n {\n id: 'deployments',\n label: 'Deployments',\n icon: IconCloud,\n route: '/actions/deployments',\n },\n ],\n },\n {\n id: 'packages',\n label: 'Packages',\n icon: IconPackages,\n subItems: [\n {\n id: 'published',\n label: 'Published',\n icon: IconPackageExport,\n route: '/packages/published',\n },\n {\n id: 'container-registry',\n label: 'Container Registry',\n icon: IconDatabase,\n route: '/packages/containers',\n },\n {\n id: 'npm-packages',\n label: 'npm Packages',\n icon: IconBrandNpm,\n route: '/packages/npm',\n },\n ],\n },\n {\n id: 'security',\n label: 'Security',\n icon: IconLockPassword,\n badge: '2',\n subItems: [\n {\n id: 'alerts',\n label: 'Security Alerts',\n icon: IconLockExclamation,\n route: '/security/alerts',\n },\n {\n id: 'advisories',\n label: 'Advisories',\n icon: IconShieldLock,\n route: '/security/advisories',\n },\n {\n id: 'secrets',\n label: 'Secrets',\n icon: IconPasswordFingerprint,\n route: '/security/secrets',\n },\n ],\n },\n {\n id: 'settings',\n label: 'Settings',\n icon: IconSettings,\n subItems: [\n {\n id: 'profile',\n label: 'Profile',\n icon: IconUser,\n route: '/settings/profile',\n },\n {\n id: 'notifications',\n label: 'Notifications',\n icon: IconBellRinging,\n route: '/settings/notifications',\n },\n {\n id: 'webhooks',\n label: 'Webhooks',\n icon: IconWebhook,\n route: '/settings/webhooks',\n },\n {\n id: 'api-keys',\n label: 'API Keys',\n icon: IconKey,\n route: '/settings/api-keys',\n },\n ],\n },\n {\n id: 'docs',\n label: 'Documentation',\n icon: IconFileText,\n route: '/docs',\n },\n];\n\nexport function AppSidebar() {\n const [activeItem, setActiveItem] = useState(null);\n const [selectedSubItem, setSelectedSubItem] = useState(null);\n\n const activeItemData = sidebarItems.find((item) => item.id === activeItem);\n\n const handleItemClick = (item: SidebarItem) => {\n if (item.subItems) {\n setActiveItem(item.id);\n setSelectedSubItem(null);\n } else {\n console.log(`[v0] Navigating to: ${item.route}`);\n }\n };\n\n const handleSubItemClick = (subItem: { id: string; route?: string }) => {\n setSelectedSubItem(selectedSubItem === subItem.id ? null : subItem.id);\n if (subItem.route) {\n console.log(`[v0] Navigating to: ${subItem.route}`);\n }\n };\n\n const handleBackToMain = () => {\n setActiveItem(null);\n setSelectedSubItem(null);\n };\n\n return (\n
    \n \n {activeItem ? (\n activeItemData?.subItems && (\n <>\n \n \n \n \n

    \n {activeItemData.label}\n

    \n
    \n \n\n \n \n \n \n {activeItemData.subItems.map((subItem) => {\n const SubIcon = subItem.icon;\n const isSelected = selectedSubItem === subItem.id;\n\n return (\n \n handleSubItemClick(subItem)}\n >\n
    \n \n \n {subItem.label}\n \n
    \n \n     \n );\n })}\n     \n     \n     \n     \n \n )\n ) : (\n <>\n \n \n \n\n \n \n \n \n {sidebarItems.map((item) => {\n const Icon = item.icon;\n const chevronIndicator = (\n \n );\n\n return (\n \n handleItemClick(item)}\n >\n
    \n \n {item.label}\n
    \n
    \n {(item.badge || item.subItems) &&\n (item.badge ? (\n \n {item.badge}\n {item.subItems && chevronIndicator}\n \n ) : (\n chevronIndicator\n ))}\n
    \n \n     \n );\n })}\n     \n     \n     \n     \n\n \n \n \n \n
    \n \n \n \n E\n \n \n
    \n
    \n ephraim\n
    \n
    \n ephraim@blocks.so\n
    \n
    \n
    \n \n     \n     \n     \n     \n \n )}\n \n
    \n );\n}\n" }, { "path": "content/components/sidebar/sidebar-06/app/page.tsx", "type": "registry:page", "target": "app/page.tsx", "content": "'use client';\n\nimport { SidebarProvider } from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-06/app-sidebar';\n\nexport default function Page() {\n return (\n \n
    \n \n
    \n     \n );\n}\n" } ], "categories": [ "sidebar" ] }, { "name": "stats-01", "type": "registry:block", "title": "Stats with Trending", "description": "A stats with trending block.", "author": "ephraim duncan ", "registryDependencies": [ "card" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-01.tsx", "type": "registry:component", "target": "components/stats-01.tsx", "content": "import { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n {\n name: 'Profit',\n value: '$287,654.00',\n change: '+8.32%',\n changeType: 'positive',\n },\n {\n name: 'Late payments',\n value: '$9,435.00',\n change: '-12.64%',\n changeType: 'negative',\n },\n {\n name: 'Pending orders',\n value: '$173,229.00',\n change: '+2.87%',\n changeType: 'positive',\n },\n {\n name: 'Operating costs',\n value: '$52,891.00',\n change: '-5.73%',\n changeType: 'negative',\n },\n];\n\nexport default function Stats01() {\n return (\n
    \n
    \n {data.map((stat, index) => (\n \n \n
    \n {stat.name}\n
    \n \n {stat.change}\n
    \n
    \n {stat.value}\n
    \n \n \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-02", "type": "registry:block", "title": "Stats with Borders", "description": "A stats with borders block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "card" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/stats/stats-02.tsx", "type": "registry:component", "target": "components/stats-02.tsx", "content": "import { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardContent, CardTitle } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst stats = [\n {\n metric: 'Active Users',\n current: '128,456',\n previous: '115,789',\n difference: '10.9%',\n trend: 'up',\n },\n {\n metric: 'Conversion Rate',\n current: '5.32%',\n previous: '6.18%',\n difference: '0.86%',\n trend: 'down',\n },\n {\n metric: 'Avg. Session Duration',\n current: '3m 42s',\n previous: '3m 15s',\n difference: '13.8%',\n trend: 'up',\n },\n];\n\nexport default function Stats02() {\n return (\n
    \n
    \n {stats.map((item) => (\n \n \n \n {item.metric}\n \n
    \n
    \n {item.current}\n \n from {item.previous}\n \n
    \n\n svg]:size-5!',\n item.trend === 'up'\n ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'\n : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'\n )}\n variant=\"outline\"\n >\n {item.trend === 'up' ? (\n \n ) : (\n \n )}\n\n \n {' '}\n {item.trend === 'up' ? 'Increased' : 'Decreased'} by{' '}\n \n {item.difference}\n \n
    \n     \n \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-03", "type": "registry:block", "title": "Stats with Card Layout", "description": "A stats with card layout block.", "author": "ephraim duncan ", "registryDependencies": [ "card" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-03.tsx", "type": "registry:component", "target": "components/stats-03.tsx", "content": "'use client';\n\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n {\n name: 'Unique visitors',\n stat: '10,450',\n change: '-12.5%',\n changeType: 'negative',\n },\n {\n name: 'Bounce rate',\n stat: '56.1%',\n change: '+1.8%',\n changeType: 'positive',\n },\n {\n name: 'Visit duration',\n stat: '5.2min',\n change: '+19.7%',\n changeType: 'positive',\n },\n {\n name: 'Conversion rate',\n stat: '3.2%',\n change: '-2.4%',\n changeType: 'negative',\n },\n];\n\nexport default function Stats03() {\n return (\n
    \n
    \n {data.map((item) => (\n \n \n
    \n {item.name}\n
    \n
    \n \n {item.stat}\n \n \n {item.change}\n \n
    \n     \n     \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-04", "type": "registry:block", "title": "Stats with Badges", "description": "A stats with badges block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "card" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/stats/stats-04.tsx", "type": "registry:component", "target": "components/stats-04.tsx", "content": "'use client';\n\nimport { TrendingDown, TrendingUp } from 'lucide-react';\nimport { Badge } from '@/components/ui/badge';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n {\n name: 'Daily active users',\n stat: '3,450',\n change: '+12.1%',\n changeType: 'positive',\n },\n {\n name: 'Weekly sessions',\n stat: '1,342',\n change: '-9.8%',\n changeType: 'negative',\n },\n {\n name: 'Duration',\n stat: '5.2min',\n change: '+7.7%',\n changeType: 'positive',\n },\n];\n\nexport default function Stats04() {\n return (\n
    \n
    \n {data.map((item) => (\n \n \n
    \n
    \n {item.name}\n
    \n \n {item.changeType === 'positive' ? (\n \n ) : (\n \n )}\n \n {item.changeType === 'positive' ? 'Increased' : 'Decreased'}{' '}\n by{' '}\n \n {item.change}\n \n
    \n
    \n {item.stat}\n
    \n     \n     \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-05", "type": "registry:block", "title": "Stats with Links", "description": "A stats with links block.", "author": "ephraim duncan ", "registryDependencies": [ "card" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-05.tsx", "type": "registry:component", "target": "components/stats-05.tsx", "content": "'use client';\n\nimport { Card, CardContent, CardFooter } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n {\n name: 'Monthly recurring revenue',\n value: '$34.1K',\n change: '+6.1%',\n changeType: 'positive',\n href: '#',\n },\n {\n name: 'Users',\n value: '500.1K',\n change: '+19.2%',\n changeType: 'positive',\n href: '#',\n },\n {\n name: 'User growth',\n value: '11.3%',\n change: '-1.2%',\n changeType: 'negative',\n href: '#',\n },\n];\n\nexport default function Stats05() {\n return (\n
    \n
    \n {data.map((item) => (\n \n \n
    \n \n {item.name}\n \n \n {item.change}\n \n
    \n
    \n {item.value}\n
    \n     \n \n \n View more →\n \n \n     \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-06", "type": "registry:block", "title": "Stats with Status", "description": "A stats with status block.", "author": "ephraim duncan ", "registryDependencies": [], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/stats/stats-06.tsx", "type": "registry:component", "target": "components/stats-06.tsx", "content": "'use client';\n\nimport { ArrowRight } from 'lucide-react';\nimport Link from 'next/link';\nimport { cn } from '@/lib/utils';\n\nconst statuses = {\n within: { label: 'On track', color: 'bg-emerald-500' },\n observe: { label: 'Needs attention', color: 'bg-amber-500' },\n critical: { label: 'At risk', color: 'bg-red-500' },\n};\n\nconst data = [\n {\n name: 'Europe',\n stat: '$10,023',\n goalsAchieved: 3,\n status: 'observe',\n href: '#',\n },\n {\n name: 'North America',\n stat: '$14,092',\n goalsAchieved: 5,\n status: 'within',\n href: '#',\n },\n {\n name: 'Asia',\n stat: '$113,232',\n goalsAchieved: 1,\n status: 'critical',\n href: '#',\n },\n] as {\n name: string;\n stat: string;\n goalsAchieved: number;\n status: keyof typeof statuses;\n href: string;\n}[];\n\nconst goals = [1, 2, 3, 4, 5];\n\nexport default function Stats06() {\n return (\n
    \n
    \n {data.map((item) => {\n const status = statuses[item.status];\n return (\n \n
    \n
    \n {item.name}\n
    \n
    \n \n {status.label}\n
    \n
    \n
    \n {item.stat}\n
    \n
    \n
    \n Goals achieved\n \n {item.goalsAchieved}/{goals.length}\n \n
    \n
    \n {goals.map((goal) => (\n \n ))}\n
    \n
    \n
    \n \n \n View region\n \n \n
    \n
    \n );\n })}\n \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-07", "type": "registry:block", "title": "Stats with Circular Progress", "description": "A stats with circular progress block.", "author": "ephraim duncan ", "registryDependencies": [ "card", "chart" ], "dependencies": [ "lucide-react", "recharts" ], "files": [ { "path": "content/components/stats/stats-07.tsx", "type": "registry:component", "target": "components/stats-07.tsx", "content": "'use client';\n\nimport { ExternalLink } from 'lucide-react';\nimport Link from 'next/link';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nconst data = [\n {\n name: 'Workspaces',\n capacity: 20,\n current: 1,\n allowed: 5,\n fill: 'var(--chart-1)',\n },\n {\n name: 'Dashboards',\n capacity: 10,\n current: 2,\n allowed: 20,\n fill: 'var(--chart-2)',\n },\n {\n name: 'Chart widgets',\n capacity: 30,\n current: 15,\n allowed: 50,\n fill: 'var(--chart-3)',\n },\n {\n name: 'Storage',\n capacity: 50,\n current: 25,\n allowed: 100,\n fill: 'var(--chart-4)',\n },\n];\n\nconst chartConfig = {\n capacity: {\n label: 'Capacity',\n color: 'hsl(var(--primary))',\n },\n} satisfies ChartConfig;\n\nexport default function Stats07() {\n return (\n
    \n
    \n

    \n Plan overview\n

    \n

    \n You are currently on the{' '}\n starter plan.{' '}\n \n View other plans\n \n \n

    \n
    \n {data.map((item) => (\n \n \n
    \n \n \n \n \n \n \n
    \n \n {item.capacity}%\n \n
    \n
    \n
    \n
    \n {item.name}\n
    \n
    \n {item.current} of {item.allowed} used\n
    \n
    \n     \n     \n ))}\n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-08", "type": "registry:block", "title": "Stats with Circular Progress and Links", "description": "A stats with circular progress and links block.", "author": "ephraim duncan ", "registryDependencies": [ "card", "chart" ], "dependencies": [ "recharts" ], "files": [ { "path": "content/components/stats/stats-08.tsx", "type": "registry:component", "target": "components/stats-08.tsx", "content": "'use client';\n\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport { Card, CardContent, CardFooter } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nconst data = [\n {\n name: 'HR',\n progress: 25,\n budget: '$1,000',\n current: '$250',\n href: '#',\n fill: 'var(--chart-1)',\n },\n {\n name: 'Marketing',\n progress: 55,\n budget: '$1,000',\n current: '$550',\n href: '#',\n fill: 'var(--chart-2)',\n },\n {\n name: 'Finance',\n progress: 85,\n budget: '$1,000',\n current: '$850',\n href: '#',\n fill: 'var(--chart-3)',\n },\n {\n name: 'Engineering',\n progress: 70,\n budget: '$2,000',\n current: '$1,400',\n href: '#',\n fill: 'var(--chart-4)',\n },\n];\n\nconst chartConfig = {\n progress: {\n label: 'Progress',\n color: 'var(--primary)',\n },\n} satisfies ChartConfig;\n\nexport default function Stats08() {\n return (\n
    \n
    \n {data.map((item) => (\n \n \n
    \n
    \n \n \n \n \n \n \n
    \n \n {item.progress}%\n \n
    \n
    \n
    \n
    \n {item.current} / {item.budget}\n
    \n
    \n Budget {item.name}\n
    \n
    \n
    \n     \n \n \n View more →\n \n \n     \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-09", "type": "registry:block", "title": "Stats with Progress", "description": "A stats with progress block.", "author": "ephraim duncan ", "registryDependencies": [ "card", "progress" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-09.tsx", "type": "registry:component", "target": "components/stats-09.tsx", "content": "'use client';\n\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Progress } from '@/components/ui/progress';\n\nconst data = [\n {\n name: 'Requests',\n stat: '996',\n limit: '10,000',\n percentage: 9.96,\n },\n {\n name: 'Credits',\n stat: '$672',\n limit: '$1,000',\n percentage: 67.2,\n },\n {\n name: 'Storage',\n stat: '1.85',\n limit: '10GB',\n percentage: 18.5,\n },\n {\n name: 'API Calls',\n stat: '4,328',\n limit: '5,000',\n percentage: 86.56,\n },\n];\n\nexport default function Stats09() {\n return (\n
    \n
    \n {data.map((item) => (\n \n \n
    {item.name}
    \n
    \n {item.stat}\n
    \n \n
    \n {item.percentage}%\n \n {item.stat} of {item.limit}\n \n
    \n     \n     \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-10", "type": "registry:block", "title": "Stats with Area Chart", "description": "A stats with area chart block.", "author": "ephraim duncan ", "registryDependencies": [ "card", "chart" ], "dependencies": [ "recharts" ], "files": [ { "path": "content/components/stats/stats-10.tsx", "type": "registry:component", "target": "components/stats-10.tsx", "content": "'use client';\n\nimport { Area, AreaChart, XAxis } from 'recharts';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { ChartContainer } from '@/components/ui/chart';\nimport { cn } from '@/lib/utils';\n\nconst data = [\n {\n date: 'Nov 24, 2023',\n 'Alpha Corp': 142.87,\n 'Beta Solutions': 65.32,\n 'Gamma Industries': 83.25,\n },\n {\n date: 'Nov 25, 2023',\n 'Alpha Corp': 151.43,\n 'Beta Solutions': 59.78,\n 'Gamma Industries': 79.64,\n },\n {\n date: 'Nov 26, 2023',\n 'Alpha Corp': 157.28,\n 'Beta Solutions': 64.21,\n 'Gamma Industries': 76.19,\n },\n {\n date: 'Nov 27, 2023',\n 'Alpha Corp': 162.94,\n 'Beta Solutions': 57.46,\n 'Gamma Industries': 72.84,\n },\n {\n date: 'Nov 28, 2023',\n 'Alpha Corp': 148.37,\n 'Beta Solutions': 49.82,\n 'Gamma Industries': 81.56,\n },\n {\n date: 'Nov 29, 2023',\n 'Alpha Corp': 139.56,\n 'Beta Solutions': 55.63,\n 'Gamma Industries': 92.38,\n },\n {\n date: 'Nov 30, 2023',\n 'Alpha Corp': 145.83,\n 'Beta Solutions': 61.27,\n 'Gamma Industries': 88.75,\n },\n {\n date: 'Dec 01, 2023',\n 'Alpha Corp': 138.29,\n 'Beta Solutions': 68.94,\n 'Gamma Industries': 93.42,\n },\n {\n date: 'Dec 02, 2023',\n 'Alpha Corp': 129.64,\n 'Beta Solutions': 74.56,\n 'Gamma Industries': 97.18,\n },\n {\n date: 'Dec 03, 2023',\n 'Alpha Corp': 119.82,\n 'Beta Solutions': 71.38,\n 'Gamma Industries': 89.43,\n },\n {\n date: 'Dec 04, 2023',\n 'Alpha Corp': 128.54,\n 'Beta Solutions': 63.95,\n 'Gamma Industries': 92.76,\n },\n {\n date: 'Dec 05, 2023',\n 'Alpha Corp': 137.21,\n 'Beta Solutions': 58.47,\n 'Gamma Industries': 84.29,\n },\n {\n date: 'Dec 06, 2023',\n 'Alpha Corp': 134.68,\n 'Beta Solutions': 69.12,\n 'Gamma Industries': 79.38,\n },\n {\n date: 'Dec 07, 2023',\n 'Alpha Corp': 152.73,\n 'Beta Solutions': 73.89,\n 'Gamma Industries': 81.42,\n },\n {\n date: 'Dec 08, 2023',\n 'Alpha Corp': 168.59,\n 'Beta Solutions': 78.54,\n 'Gamma Industries': 75.68,\n },\n];\n\nconst summary = [\n {\n name: 'Alpha Corp',\n tickerSymbol: 'ACP',\n value: '$168.59',\n change: '+15.86',\n percentageChange: '+10.4%',\n changeType: 'positive',\n },\n {\n name: 'Beta Solutions',\n tickerSymbol: 'BTS',\n value: '$78.54',\n change: '+4.65',\n percentageChange: '+6.3%',\n changeType: 'positive',\n },\n {\n name: 'Gamma Industries',\n tickerSymbol: 'GMI',\n value: '$75.68',\n change: '-5.74',\n percentageChange: '-7.1%',\n changeType: 'negative',\n },\n];\n\nconst sanitizeName = (name: string) => {\n return name\n .replace(/\\\\s+/g, '-')\n .replace(/[^a-zA-Z0-9-]/g, '_')\n .toLowerCase();\n};\n\nexport default function Stats10() {\n return (\n
    \n
    \n {summary.map((item) => {\n const sanitizedName = sanitizeName(item.name);\n const gradientId = `gradient-${sanitizedName}`;\n\n const color =\n item.changeType === 'positive'\n ? 'hsl(142.1 76.2% 36.3%)'\n : 'hsl(0 72.2% 50.6%)';\n\n return (\n \n \n
    \n
    \n {item.name}{' '}\n \n ({item.tickerSymbol})\n \n
    \n
    \n \n {item.value}\n \n
    \n \n {item.change}\n \n \n ({item.percentageChange})\n \n
    \n
    \n
    \n\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n     \n     \n );\n })}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-11", "type": "registry:block", "title": "Stats Dashboard with Progress Bars", "description": "A stats dashboard with progress bars block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "dialog", "input", "label" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/stats/stats-11.tsx", "type": "registry:component", "target": "components/stats-11.tsx", "content": "'use client';\n\nimport { Box, Edit } from 'lucide-react';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\ninterface MetricCardProps {\n title: string;\n value: string;\n limit: string;\n percentage: number;\n status?: string;\n statusColor?: string;\n progressColor: string;\n details?: Array<{ label: string; value: string; color: string }>;\n actionLabel: string;\n actionIcon: React.ReactNode;\n warningMessage?: string;\n onActionClick?: () => void;\n}\n\nfunction MetricCard({\n title,\n value,\n limit,\n percentage,\n status,\n statusColor = 'text-emerald-600 dark:text-emerald-400',\n progressColor,\n details,\n actionLabel,\n actionIcon,\n warningMessage,\n onActionClick,\n}: MetricCardProps) {\n const renderProgressBar = () => {\n if (details && title === 'Commands') {\n const writes = Number.parseInt(details[0].value.replace(/,/g, ''));\n const reads = Number.parseInt(details[1].value.replace(/,/g, ''));\n const total = writes + reads;\n const writesPercentage = (writes / total) * 100;\n const readsPercentage = (reads / total) * 100;\n\n return (\n
    \n \n \n
    \n );\n }\n\n return (\n
    \n \n
    \n );\n };\n\n return (\n \n \n
    \n {title}\n
    \n\n
    \n
    \n {value}\n
    \n
    \n / {limit}\n
    \n
    \n\n
    \n {renderProgressBar()}\n\n {details && (\n
    \n
    \n {details.map((detail, index) => (\n \n \n
    {detail.label}
    \n
    \n
    {detail.value}
    \n
    \n ))}\n
    \n
    \n )}\n\n {status && (\n
    \n
    {status}
    \n
    \n )}\n\n {warningMessage && (\n
    \n
    \n {warningMessage}\n
    \n
    \n )}\n
    \n\n
    \n \n {actionIcon}\n {actionLabel}\n \n
    \n     \n     \n );\n}\n\nfunction BudgetDialog({\n open,\n onOpenChange,\n}: {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}) {\n const [budget, setBudget] = useState('150');\n\n const handleUpdate = () => {\n onOpenChange(false);\n };\n\n return (\n \n \n \n Update budget\n \n When your monthly cost reaches the max budget, we send an email and\n throttle your database. You will not be charged beyond your set\n budget for this database.\n \n \n\n
    \n \n setBudget(e.target.value)}\n placeholder=\"150\"\n type=\"number\"\n value={budget}\n />\n
    \n\n \n \n \n \n     \n     \n );\n}\n\nexport default function Stats11() {\n const [budgetDialogOpen, setBudgetDialogOpen] = useState(false);\n\n return (\n <>\n
    \n }\n actionLabel=\"Upgrade\"\n details={[\n { label: 'Writes', value: '11,276,493', color: 'bg-emerald-500' },\n { label: 'Reads', value: '2,548,921', color: 'bg-blue-500' },\n ]}\n limit=\"Unlimited\"\n percentage={67}\n progressColor=\"bg-blue-500\"\n title=\"Commands\"\n value=\"13.8M\"\n />\n\n }\n actionLabel=\"Upgrade\"\n limit=\"150 GB\"\n percentage={94}\n progressColor=\"bg-orange-500\"\n title=\"Bandwidth\"\n value=\"141 GB\"\n warningMessage=\"There will be a charge for the excessive bandwidth over the limit.\"\n />\n\n }\n actionLabel=\"Upgrade\"\n limit=\"500 GB\"\n percentage={7.4}\n progressColor=\"bg-emerald-500\"\n status=\"It's all right.\"\n title=\"Storage\"\n value=\"37 GB\"\n />\n\n }\n actionLabel=\"Change Budget\"\n limit=\"$150 Budget\"\n onActionClick={() => setBudgetDialogOpen(true)}\n percentage={48.95}\n progressColor=\"bg-emerald-500\"\n status=\"It's all right.\"\n title=\"Cost\"\n value=\"$73.42\"\n />\n
    \n\n \n \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-12", "type": "registry:block", "title": "Stats Usage Dashboard", "description": "A stats usage dashboard block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "card", "chart" ], "dependencies": [ "recharts" ], "files": [ { "path": "content/components/stats/stats-12.tsx", "type": "registry:component", "target": "components/stats-12.tsx", "content": "'use client';\n\nimport { Cell, Pie, PieChart } from 'recharts';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardHeader } from '@/components/ui/card';\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\ninterface UsageItem {\n name: string;\n current: string;\n limit: string;\n percentage: number;\n href?: string;\n}\n\nconst usageData: UsageItem[] = [\n { name: 'ISR Reads', current: '358K', limit: '1M', percentage: 35.8 },\n { name: 'Edge Requests', current: '317K', limit: '1M', percentage: 31.7 },\n {\n name: 'Fast Origin Transfer',\n current: '3.07 GB',\n limit: '10 GB',\n percentage: 30.7,\n },\n {\n name: 'Speed Insights Data Points',\n current: '791',\n limit: '10K',\n percentage: 7.9,\n },\n {\n name: 'Fast Data Transfer',\n current: '4.98 GB',\n limit: '100 GB',\n percentage: 5.0,\n },\n {\n name: 'Function Duration',\n current: '3.1 GB-Hrs',\n limit: '100 GB-Hrs',\n percentage: 3.1,\n },\n {\n name: 'Web Analytics Events',\n current: '1.3K',\n limit: '50K',\n percentage: 2.6,\n },\n { name: 'ISR Writes', current: '4.8K', limit: '200K', percentage: 2.4 },\n {\n name: 'Function Invocations',\n current: '19K',\n limit: '1M',\n percentage: 1.9,\n },\n {\n name: 'Image Optimization - Cache Reads',\n current: '4.3K',\n limit: '300K',\n percentage: 1.4,\n },\n];\n\nconst chartConfig = {\n used: {\n label: 'Used',\n color: 'hsl(var(--primary))',\n },\n remaining: {\n label: 'Remaining',\n color: 'hsl(var(--muted))',\n },\n} satisfies ChartConfig;\n\nfunction DonutChart({ percentage }: { percentage: number }) {\n const backgroundData = [{ name: 'background', value: 100, fill: '#E5E7EB' }];\n const foregroundData = [\n {\n name: 'used',\n value: Math.max(0, Math.min(100, Number(percentage))),\n fill: '#3B82F6',\n },\n {\n name: 'empty',\n value: 100 - Math.max(0, Math.min(100, Number(percentage))),\n fill: 'transparent',\n },\n ];\n\n return (\n \n \n \n {backgroundData.map((entry, index) => (\n \n ))}\n \n \n {foregroundData.map((entry, index) => (\n \n ))}\n \n \n \n );\n}\n\nexport default function Stats12() {\n return (\n \n \n
    \n
    \n

    Last 30 days

    \n

    \n Updated just now\n

    \n
    \n \n
    \n     \n\n \n
    \n {usageData.map((item, index) => (\n \n \n \n {item.name}\n \n \n {item.current} /{' '}\n {item.limit}\n \n
    \n ))}\n
    \n \n \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-13", "type": "registry:block", "title": "Stats with Segmented Progress", "description": "A stats with segmented progress block.", "author": "ephraim duncan ", "registryDependencies": [ "card" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-13.tsx", "type": "registry:component", "target": "components/stats-13.tsx", "content": "'use client';\n\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\ninterface Props {\n title?: string;\n used?: number;\n total?: number;\n usedLabel?: string;\n totalLabel?: string;\n segments?: {\n label: string;\n value: number;\n color: string;\n }[];\n className?: string;\n}\n\nconst defaultSegments: NonNullable = [\n { label: 'Documents', value: 2400, color: 'bg-blue-500' },\n { label: 'Photos', value: 1800, color: 'bg-emerald-500' },\n { label: 'Videos', value: 3200, color: 'bg-amber-500' },\n { label: 'Music', value: 900, color: 'bg-purple-500' },\n];\n\nexport default function Stats13({\n title = 'Using Storage',\n used = 8300,\n total = 15,\n usedLabel = 'MB',\n totalLabel = 'GB',\n segments = defaultSegments,\n className,\n}: Props) {\n const totalValue = total * 1000;\n const freeValue = totalValue - used;\n\n return (\n \n \n

    \n {title}{' '}\n \n {used.toLocaleString(undefined, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n })}{' '}\n {usedLabel}\n {' '}\n of {total} {totalLabel}\n

    \n\n
    \n {segments.map((segment) => {\n const percentage = (segment.value / totalValue) * 100;\n return (\n \n );\n })}\n
    \n\n
    \n {segments.map((segment) => (\n
    \n \n \n {segment.label}\n \n \n {Math.round(segment.value)}\n {usedLabel}\n \n
    \n ))}\n
    \n \n Free\n \n {Math.round(freeValue)}\n {usedLabel}\n \n
    \n
    \n     \n     \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-14", "type": "registry:block", "title": "Stats with Usage Breakdown", "description": "A stats with usage breakdown block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "card" ], "dependencies": [], "files": [ { "path": "content/components/stats/stats-14.tsx", "type": "registry:component", "target": "components/stats-14.tsx", "content": "import { Badge } from '@/components/ui/badge';\nimport { Card, CardContent } from '@/components/ui/card';\n\ninterface UsageItem {\n label: string;\n amount: number;\n percentage: number;\n color: 'emerald' | 'amber' | 'rose';\n}\n\nconst data: UsageItem[] = [\n { label: 'Compute', amount: 450, percentage: 52.3, color: 'emerald' },\n { label: 'Storage', amount: 285, percentage: 33.1, color: 'amber' },\n { label: 'Bandwidth', amount: 125, percentage: 14.6, color: 'rose' },\n];\n\nconst colorClasses = {\n emerald: 'bg-emerald-500 dark:bg-emerald-400',\n amber: 'bg-amber-500 dark:bg-amber-400',\n rose: 'bg-rose-500 dark:bg-rose-400',\n};\n\nexport function Stats14() {\n return (\n \n \n
    \n
    \n

    \n Usage\n

    \n \n +12.5%\n \n
    \n\n

    \n $860\n this month\n

    \n\n
    \n

    \n Resource breakdown\n

    \n
    \n {data.map((item, index) => (\n \n ))}\n
    \n
    \n\n
      \n {data.map((item, index) => (\n
    • \n \n {item.label}\n \n (${item.amount} / {item.percentage}%)\n \n
      • \n ))}\n
    \n
    \n\n

    \n Configure limits in{' '}\n \n resource settings.\n \n

    \n     \n     \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "stats-15", "type": "registry:block", "title": "Stats with Value Breakdown", "description": "A stats with value breakdown block.", "author": "ephraim duncan ", "registryDependencies": [], "dependencies": [], "files": [ { "path": "content/components/stats/stats-15.tsx", "type": "registry:component", "target": "components/stats-15.tsx", "content": "import { cn } from '@/lib/utils';\n\nconst data = [\n {\n label: 'After 1 year',\n value: '$2,400',\n percentage: '+8.2%',\n },\n {\n label: 'After 5 years',\n value: '$14,800',\n percentage: '+24.6%',\n },\n {\n label: 'After 10 years',\n value: '$38,500',\n percentage: '+52.1%',\n },\n];\n\nexport function Stats15() {\n return (\n
    \n

    \n Investment growth projection\n

    \n
      \n {data.map((item, index) => (\n
    • \n {item.label}\n \n \n {item.value}\n \n \n \n {item.percentage}\n \n \n
      • \n ))}\n
    \n
    \n );\n}\n" } ], "categories": [ "stats" ] }, { "name": "table-01", "type": "registry:block", "title": "Table with Accordion", "description": "A table with accordion block.", "author": "ephraim duncan ", "registryDependencies": [ "button", "collapsible", "table" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/tables/table-01.tsx", "type": "registry:component", "target": "components/table-01.tsx", "content": "'use client';\n\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\ninterface TableRowData {\n id: string;\n name: string;\n category: string;\n value: number;\n date: string;\n children?: TableRowData[];\n}\n\nconst sampleData: TableRowData[] = [\n {\n id: '001',\n name: 'Project Alpha',\n category: 'Development',\n value: 45_000,\n date: '2024-01-15',\n children: [\n {\n id: '001-01',\n name: 'Frontend Module',\n category: 'Development',\n value: 15_000,\n date: '2024-01-16',\n },\n {\n id: '001-02',\n name: 'Backend Module',\n category: 'Development',\n value: 20_000,\n date: '2024-01-21',\n },\n {\n id: '001-03',\n name: 'Testing Suite',\n category: 'Development',\n value: 10_000,\n date: '2024-01-24',\n },\n ],\n },\n {\n id: '002',\n name: 'Marketing Campaign',\n category: 'Marketing',\n value: 28_500,\n date: '2024-01-18',\n children: [\n {\n id: '002-01',\n name: 'Social Media',\n category: 'Marketing',\n value: 12_000,\n date: '2024-01-19',\n },\n {\n id: '002-02',\n name: 'Email Marketing',\n category: 'Marketing',\n value: 8500,\n date: '2024-01-22',\n },\n {\n id: '002-03',\n name: 'SEO Optimization',\n category: 'Marketing',\n value: 8000,\n date: '2024-01-23',\n },\n ],\n },\n {\n id: '003',\n name: 'Infrastructure Upgrade',\n category: 'Operations',\n value: 67_200,\n date: '2024-01-20',\n children: [\n {\n id: '003-01',\n name: 'Cloud Migration',\n category: 'Operations',\n value: 35_000,\n date: '2024-01-21',\n },\n {\n id: '003-02',\n name: 'Security Enhancement',\n category: 'Operations',\n value: 32_200,\n date: '2024-01-24',\n },\n ],\n },\n {\n id: '004',\n name: 'Customer Support',\n category: 'Service',\n value: 19_800,\n date: '2024-01-25',\n },\n];\n\ninterface AccordionRowProps {\n row: TableRowData;\n defaultOpen?: boolean;\n}\n\nfunction AccordionRow({ row, defaultOpen = false }: AccordionRowProps) {\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const hasChildren = row.children && row.children.length > 0;\n\n return (\n \n }\n >\n \n \n setIsOpen(!isOpen)}\n size=\"icon\"\n variant=\"ghost\"\n >\n {hasChildren ? (\n isOpen ? (\n \n ) : (\n \n )\n ) : (\n
    \n )}\n \n \n \n {row.id}\n \n {row.name}\n \n {row.category}\n \n \n ${row.value.toLocaleString()}\n \n \n {row.date}\n \n \n\n {hasChildren && (\n \n \n \n
    \n \n \n \n \n \n ID\n \n \n Name\n \n \n Category\n \n \n Value\n \n \n Date\n \n \n \n \n {row.children?.map((childRow) => (\n \n \n \n {childRow.id}\n \n \n {childRow.name}\n \n \n {childRow.category}\n \n \n ${childRow.value.toLocaleString()}\n \n \n {childRow.date}\n \n \n ))}\n \n
    \n
    \n     \n     \n     \n )}\n \n );\n}\n\nexport default function Table01() {\n return (\n
    \n
    \n \n \n \n \n \n ID\n \n \n Name\n \n \n Category\n \n \n Value\n \n \n Date\n \n \n \n {sampleData.map((row, index) => (\n \n ))}\n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "tables" ] }, { "name": "table-02", "type": "registry:block", "title": "Table with Actions", "description": "A table with actions block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "button", "table", "tooltip" ], "dependencies": [ "lucide-react" ], "files": [ { "path": "content/components/tables/table-02.tsx", "type": "registry:component", "target": "components/table-02.tsx", "content": "'use client';\n\nimport {\n CheckCircle,\n FileTextIcon,\n Loader2,\n PauseIcon,\n PlayIcon,\n Trash2Icon,\n} from 'lucide-react';\nimport { useState } from 'react';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from '@/components/ui/tooltip';\n\ninterface Task {\n id: string;\n title: string;\n assignee: string;\n status: 'pending' | 'in-progress' | 'completed' | 'blocked';\n priority: 'low' | 'medium' | 'high' | 'urgent';\n dueDate: string;\n notes: string;\n}\n\ntype TaskActionType = 'start' | 'pause' | 'complete' | 'delete' | 'view';\n\nconst tasks: Task[] = [\n {\n id: 'TASK-001',\n title: 'Implement User Authentication',\n assignee: 'Sarah Chen',\n status: 'in-progress',\n priority: 'high',\n dueDate: '2024-03-25',\n notes: 'OAuth 2.0 integration with Google and GitHub providers',\n },\n {\n id: 'TASK-002',\n title: 'Design Dashboard UI',\n assignee: 'Michael Torres',\n status: 'completed',\n priority: 'medium',\n dueDate: '2024-03-20',\n notes: 'Finalize dashboard layout with responsive grid system',\n },\n {\n id: 'TASK-003',\n title: 'API Performance Optimization',\n assignee: 'Emma Rodriguez',\n status: 'pending',\n priority: 'urgent',\n dueDate: '2024-03-22',\n notes: 'Reduce API response time by implementing caching strategy',\n },\n {\n id: 'TASK-004',\n title: 'Write Unit Tests',\n assignee: 'James Wilson',\n status: 'in-progress',\n priority: 'medium',\n dueDate: '2024-03-28',\n notes: 'Achieve 80% code coverage for authentication module',\n },\n {\n id: 'TASK-005',\n title: 'Database Migration',\n assignee: 'Olivia Martinez',\n status: 'blocked',\n priority: 'high',\n dueDate: '2024-03-24',\n notes: 'Waiting for infrastructure team approval before proceeding',\n },\n {\n id: 'TASK-006',\n title: 'Update Documentation',\n assignee: 'Lucas Anderson',\n status: 'pending',\n priority: 'low',\n dueDate: '2024-03-30',\n notes: 'Document new API endpoints and authentication flow',\n },\n {\n id: 'TASK-007',\n title: 'Security Audit',\n assignee: 'Sophia Taylor',\n status: 'completed',\n priority: 'urgent',\n dueDate: '2024-03-19',\n notes:\n 'Conducted comprehensive security review and vulnerability assessment',\n },\n];\n\nfunction getStatusBadge(status: Task['status']) {\n switch (status) {\n case 'pending':\n return (\n \n Pending\n \n );\n case 'in-progress':\n return (\n \n In Progress\n \n );\n case 'completed':\n return (\n \n Completed\n \n );\n case 'blocked':\n return (\n \n Blocked\n \n );\n default:\n return {status};\n }\n}\n\nexport default function Table02() {\n const [pendingAction, setPendingAction] = useState<{\n id: string;\n type: TaskActionType;\n } | null>(null);\n\n const isTaskActionPending = (action: TaskActionType, taskId: string) =>\n pendingAction?.id === taskId && pendingAction.type === action;\n\n const isTaskBusy = (taskId: string) => pendingAction?.id === taskId;\n\n const handleAction = (task: Task, actionType: TaskActionType) => {\n setPendingAction({ id: task.id, type: actionType });\n setTimeout(() => {\n setPendingAction(null);\n console.log(`Action \"${actionType}\" completed for task:`, task.title);\n }, 1000);\n };\n\n const renderTaskRow = (task: Task) => {\n const busy = isTaskBusy(task.id);\n const startPending = isTaskActionPending('start', task.id);\n const pausePending = isTaskActionPending('pause', task.id);\n const completePending = isTaskActionPending('complete', task.id);\n const deletePending = isTaskActionPending('delete', task.id);\n\n return (\n \n {task.title}\n \n {task.assignee}\n \n \n {getStatusBadge(task.status)}\n \n\n \n {task.dueDate}\n \n \n \n \n }\n >\n {task.notes}\n \n {task.notes}\n \n \n \n \n \n
    \n {(task.status === 'pending' || task.status === 'blocked') && (\n \n handleAction(task, 'start')}\n size=\"icon\"\n variant=\"outline\"\n />\n }\n >\n {startPending ? (\n \n ) : (\n \n )}\n \n Start\n \n )}\n {task.status === 'in-progress' && (\n <>\n \n handleAction(task, 'pause')}\n size=\"icon\"\n variant=\"outline\"\n />\n }\n >\n {pausePending ? (\n \n ) : (\n \n )}\n \n Pause\n \n \n handleAction(task, 'complete')}\n size=\"icon\"\n variant=\"outline\"\n />\n }\n >\n {completePending ? (\n \n ) : (\n \n )}\n \n Complete\n \n \n )}\n \n handleAction(task, 'delete')}\n size=\"icon\"\n variant=\"outline\"\n />\n }\n >\n {deletePending ? (\n \n ) : (\n \n )}\n \n Delete\n \n \n handleAction(task, 'view')}\n size=\"icon\"\n variant=\"outline\"\n />\n }\n >\n \n \n View Details\n \n
    \n     \n     \n     \n );\n };\n\n return (\n
    \n \n \n \n Title\n Assignee\n \n Status\n \n\n Due Date\n Notes\n \n Actions\n \n \n \n {tasks.map(renderTaskRow)}\n
    \n
    \n );\n}\n" } ], "categories": [ "tables" ] }, { "name": "table-03", "type": "registry:block", "title": "Table with Filters", "description": "A table with filters block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "select", "table" ], "dependencies": [], "files": [ { "path": "content/components/tables/table-03.tsx", "type": "registry:component", "target": "components/table-03.tsx", "content": "'use client';\n\nimport { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\ntype Status = 'active' | 'pending' | 'discontinued' | 'on-hold';\n\ninterface Product {\n sku: string;\n productName: string;\n stockLevel: number;\n category: string;\n status: Status;\n unitPrice: string;\n lastRestocked: string;\n}\n\nconst data: Product[] = [\n {\n sku: 'SKU-8472',\n productName: 'Wireless Mouse Pro',\n stockLevel: 245,\n category: 'Electronics',\n status: 'active',\n unitPrice: '$24.99',\n lastRestocked: 'Oct 15, 2024',\n },\n {\n sku: 'SKU-3391',\n productName: 'Ergonomic Keyboard',\n stockLevel: 89,\n category: 'Electronics',\n status: 'active',\n unitPrice: '$79.99',\n lastRestocked: 'Oct 18, 2024',\n },\n {\n sku: 'SKU-7156',\n productName: 'Office Chair Deluxe',\n stockLevel: 12,\n category: 'Furniture',\n status: 'pending',\n unitPrice: '$299.99',\n lastRestocked: 'Oct 12, 2024',\n },\n {\n sku: 'SKU-9204',\n productName: 'USB-C Hub Adapter',\n stockLevel: 456,\n category: 'Accessories',\n status: 'active',\n unitPrice: '$34.50',\n lastRestocked: 'Oct 19, 2024',\n },\n {\n sku: 'SKU-1638',\n productName: 'Standing Desk Frame',\n stockLevel: 5,\n category: 'Furniture',\n status: 'on-hold',\n unitPrice: '$449.00',\n lastRestocked: 'Oct 10, 2024',\n },\n {\n sku: 'SKU-5529',\n productName: 'Laptop Stand Aluminum',\n stockLevel: 178,\n category: 'Accessories',\n status: 'active',\n unitPrice: '$45.99',\n lastRestocked: 'Oct 17, 2024',\n },\n {\n sku: 'SKU-4817',\n productName: 'Mechanical Keyboard RGB',\n stockLevel: 0,\n category: 'Electronics',\n status: 'discontinued',\n unitPrice: '$129.99',\n lastRestocked: 'Oct 05, 2024',\n },\n];\n\nfunction getStatusBadge(status: Status) {\n switch (status) {\n case 'active':\n return (\n \n Active\n \n );\n case 'pending':\n return (\n \n Pending\n \n );\n case 'discontinued':\n return (\n \n Discontinued\n \n );\n case 'on-hold':\n return (\n \n On Hold\n \n );\n default:\n return null;\n }\n}\n\nexport default function Table03() {\n const [selectedCategory, setSelectedCategory] = useState('all');\n\n const filteredData = data.filter((item) => {\n const categoryMatch =\n selectedCategory === 'all' || item.category === selectedCategory;\n return categoryMatch;\n });\n\n const uniqueCategories = Array.from(\n new Set(data.map((item) => item.category))\n );\n\n return (\n
    \n
    \n
    \n

    \n Product Inventory\n

    \n

    \n Track and manage product stock levels across all warehouse\n locations.\n

    \n
    \n
    \n ({ value: c, label: c })),\n ]}\n onValueChange={(value) => {\n if (value) {\n setSelectedCategory(value);\n }\n }}\n value={selectedCategory}\n >\n \n \n \n \n All Categories\n {uniqueCategories.map((category) => (\n \n {category}\n \n ))}\n \n \n
    \n
    \n\n
    \n \n \n \n SKU\n \n Product Name\n \n Category\n Status\n \n Unit Price\n \n \n Last Restocked\n \n \n \n \n {filteredData.length > 0 ? (\n filteredData.map((item) => (\n \n \n {item.sku}\n \n \n {item.productName}\n \n \n {item.category}\n \n \n {getStatusBadge(item.status)}\n \n \n {item.unitPrice}\n \n \n {item.lastRestocked}\n \n \n ))\n ) : (\n \n \n No products found matching the selected filters.\n \n \n )}\n \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "tables" ] }, { "name": "table-04", "type": "registry:block", "title": "Table with Grouped Rows", "description": "A table with grouped rows block.", "author": "ephraim duncan ", "registryDependencies": [ "avatar", "badge", "table" ], "dependencies": [], "files": [ { "path": "content/components/tables/table-04.tsx", "type": "registry:component", "target": "components/table-04.tsx", "content": "'use client';\n\nimport { Fragment } from 'react';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Badge } from '@/components/ui/badge';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\ninterface AssignedPerson {\n name: string;\n initials: string;\n}\n\ninterface TaskItem {\n id: string;\n task: string;\n budget: string;\n deadline: string;\n assigned: AssignedPerson[];\n status: string;\n}\n\ninterface TaskGroup {\n name: string;\n items: TaskItem[];\n}\n\ntype StatusVariant = 'success' | 'warning' | 'default' | 'secondary';\n\nconst avatarColors = [\n 'bg-blue-500',\n 'bg-purple-500',\n 'bg-emerald-500',\n 'bg-cyan-500',\n 'bg-rose-500',\n 'bg-indigo-500',\n];\n\nfunction getAvatarColor(initials: string) {\n const seed = initials\n .split('')\n .reduce((acc, char) => acc + char.charCodeAt(0), 0);\n return avatarColors[seed % avatarColors.length];\n}\n\nfunction AvatarStack({ people }: { people: AssignedPerson[] }) {\n return (\n
    \n {people.map((person, index) => (\n \n \n {person.initials}\n \n \n ))}\n
    \n );\n}\n\nconst statusStyles: Record = {\n success: {\n badge:\n 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300',\n dot: 'bg-emerald-500',\n },\n warning: {\n badge: 'bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300',\n dot: 'bg-amber-500',\n },\n default: {\n badge: 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300',\n dot: 'bg-blue-500',\n },\n secondary: {\n badge: 'bg-muted text-muted-foreground',\n dot: 'bg-muted-foreground',\n },\n};\n\nfunction StatusBadge({\n status,\n variant = 'default',\n}: {\n status: string;\n variant?: StatusVariant;\n}) {\n const styles = statusStyles[variant];\n return (\n \n \n {status}\n \n );\n}\n\nconst data: TaskGroup[] = [\n {\n name: 'Engineering',\n items: [\n {\n id: '1',\n task: 'API Integration Overhaul',\n budget: '$32,000',\n deadline: 'Dec 15, 2024',\n assigned: [\n { name: 'Marcus Chen', initials: 'MC' },\n { name: 'Priya Sharma', initials: 'PS' },\n ],\n status: 'In Progress',\n },\n {\n id: '2',\n task: 'Database Migration',\n budget: '$18,500',\n deadline: 'Jan 20, 2025',\n assigned: [{ name: 'David Kim', initials: 'DK' }],\n status: 'Completed',\n },\n {\n id: '3',\n task: 'Mobile App Redesign',\n budget: '$55,000',\n deadline: 'Feb 28, 2025',\n assigned: [\n { name: 'Lena Rodriguez', initials: 'LR' },\n { name: 'Tom Anderson', initials: 'TA' },\n { name: 'Nina Patel', initials: 'NP' },\n ],\n status: 'Planning',\n },\n ],\n },\n {\n name: 'Marketing',\n items: [\n {\n id: '4',\n task: 'Q1 Campaign Launch',\n budget: '$24,000',\n deadline: 'Jan 5, 2025',\n assigned: [\n { name: 'Rachel Green', initials: 'RG' },\n { name: 'Chris Evans', initials: 'CE' },\n ],\n status: 'In Progress',\n },\n {\n id: '5',\n task: 'Brand Refresh Project',\n budget: '$42,000',\n deadline: 'Mar 1, 2025',\n assigned: [{ name: 'Monica Geller', initials: 'MG' }],\n status: 'Planning',\n },\n ],\n },\n {\n name: 'Operations',\n items: [\n {\n id: '6',\n task: 'Vendor Contract Review',\n budget: '$8,000',\n deadline: 'Dec 30, 2024',\n assigned: [\n { name: 'Joe Tribbiani', initials: 'JT' },\n { name: 'Phoebe Buffay', initials: 'PB' },\n ],\n status: 'Completed',\n },\n {\n id: '7',\n task: 'Office Expansion Setup',\n budget: '$120,000',\n deadline: 'Apr 15, 2025',\n assigned: [{ name: 'Ross Geller', initials: 'RG' }],\n status: 'On Hold',\n },\n ],\n },\n];\n\nfunction getStatusVariant(status: string): StatusVariant {\n switch (status) {\n case 'Completed':\n return 'success';\n case 'In Progress':\n return 'default';\n case 'Planning':\n return 'secondary';\n case 'On Hold':\n return 'warning';\n default:\n return 'default';\n }\n}\n\nexport default function Table04() {\n return (\n
    \n \n \n \n Task\n Budget\n Deadline\n Assigned\n Status\n \n \n \n {data.map((group) => (\n \n \n \n {group.name}\n \n {group.items.length}\n \n \n \n {group.items.map((item) => (\n \n {item.task}\n {item.budget}\n {item.deadline}\n \n \n \n \n \n \n \n ))}\n \n ))}\n \n
    \n
    \n );\n}\n" } ], "categories": [ "tables" ] }, { "name": "table-05", "type": "registry:block", "title": "Data Table", "description": "A data table block.", "author": "ephraim duncan ", "registryDependencies": [ "badge", "button", "checkbox", "dropdown-menu", "input", "select", "table" ], "dependencies": [ "@tanstack/react-table", "lucide-react" ], "files": [ { "path": "content/components/tables/table-05.tsx", "type": "registry:component", "target": "components/table-05.tsx", "content": "'use client';\n\nimport {\n type ColumnDef,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport {\n ChevronLeft,\n ChevronRight,\n Eye,\n MoreHorizontal,\n Pencil,\n Trash2,\n} from 'lucide-react';\nimport { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Input } from '@/components/ui/input';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\ntype Status = 'completed' | 'pending' | 'processing' | 'cancelled';\n\ninterface Item {\n id: string;\n name: string;\n date: string;\n status: Status;\n amount: string;\n}\n\nconst statusConfig: Record = {\n completed: {\n label: 'Completed',\n className:\n 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400',\n },\n pending: {\n label: 'Pending',\n className:\n 'bg-amber-500/15 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400',\n },\n processing: {\n label: 'Processing',\n className:\n 'bg-blue-500/15 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400',\n },\n cancelled: {\n label: 'Cancelled',\n className:\n 'bg-rose-500/15 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400',\n },\n};\n\nfunction StatusBadge({ status }: { status: Status }) {\n const config = statusConfig[status];\n return (\n \n {config.label}\n \n );\n}\n\nconst columns: ColumnDef[] = [\n {\n id: 'select',\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: 'name',\n header: 'Name',\n cell: ({ row }) => (\n {row.getValue('name')}\n ),\n },\n {\n accessorKey: 'date',\n header: 'Date',\n },\n {\n accessorKey: 'status',\n header: 'Status',\n cell: ({ row }) => ,\n },\n {\n accessorKey: 'amount',\n header: () =>
    Amount
    ,\n cell: ({ row }) => (\n
    {row.getValue('amount')}
    \n ),\n },\n {\n id: 'actions',\n cell: () => (\n
    \n \n }\n >\n \n Open menu\n \n \n \n \n View details\n \n \n \n Edit\n \n \n \n \n Delete\n \n \n \n
    \n ),\n },\n];\n\nconst data: Item[] = [\n {\n id: '1',\n name: 'Project Alpha',\n date: 'Jan 15, 2024',\n status: 'completed',\n amount: '$2,500',\n },\n {\n id: '2',\n name: 'Website Redesign',\n date: 'Feb 3, 2024',\n status: 'processing',\n amount: '$4,200',\n },\n {\n id: '3',\n name: 'Mobile App MVP',\n date: 'Feb 18, 2024',\n status: 'pending',\n amount: '$8,750',\n },\n {\n id: '4',\n name: 'Brand Identity',\n date: 'Mar 5, 2024',\n status: 'completed',\n amount: '$1,800',\n },\n {\n id: '5',\n name: 'Marketing Campaign',\n date: 'Mar 22, 2024',\n status: 'cancelled',\n amount: '$3,400',\n },\n {\n id: '6',\n name: 'Analytics Dashboard',\n date: 'Apr 8, 2024',\n status: 'processing',\n amount: '$5,600',\n },\n {\n id: '7',\n name: 'E-commerce Platform',\n date: 'Apr 25, 2024',\n status: 'pending',\n amount: '$12,000',\n },\n {\n id: '8',\n name: 'API Integration',\n date: 'May 10, 2024',\n status: 'completed',\n amount: '$3,200',\n },\n];\n\nexport default function Table05() {\n const [globalFilter, setGlobalFilter] = useState('');\n\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onGlobalFilterChange: setGlobalFilter,\n globalFilterFn: 'includesString',\n state: {\n globalFilter,\n },\n initialState: {\n pagination: { pageSize: 5 },\n },\n });\n\n const pageCount = table.getPageCount();\n const currentPage = table.getState().pagination.pageIndex + 1;\n\n return (\n
    \n
    \n
    \n Show\n table.setPageSize(Number(value))}\n value={String(table.getState().pagination.pageSize)}\n >\n \n \n \n \n {[5, 10, 20].map((size) => (\n \n {size}\n \n ))}\n \n \n entries\n
    \n setGlobalFilter(e.target.value)}\n placeholder=\"Search...\"\n value={globalFilter}\n />\n
    \n\n
    \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
    \n
    \n\n
    \n

    \n Showing{' '}\n {table.getState().pagination.pageIndex *\n table.getState().pagination.pageSize +\n 1}{' '}\n to{' '}\n {Math.min(\n (table.getState().pagination.pageIndex + 1) *\n table.getState().pagination.pageSize,\n table.getFilteredRowModel().rows.length\n )}{' '}\n of {table.getFilteredRowModel().rows.length} entries\n

    \n
    \n table.previousPage()}\n size=\"icon\"\n variant=\"outline\"\n >\n \n Previous page\n \n {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (\n table.setPageIndex(page - 1)}\n size=\"icon\"\n variant={currentPage === page ? 'default' : 'outline'}\n >\n {page}\n \n ))}\n table.nextPage()}\n size=\"icon\"\n variant=\"outline\"\n >\n \n Next page\n \n
    \n
    \n
    \n );\n}\n" } ], "categories": [ "tables" ] } ] }