mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
3e6252864b
Major Features: - Visual Page Builder with drag-and-drop interface - Shiki syntax highlighting integration via Fumadocs - 10 new blocks (5 newsletter variants + blog/photo/showcase blocks) - AI Voice Settings component - Comprehensive AI documentation Page Builder Features: - Filterable block library with 1/4 scale previews - Drag-to-reorder blocks in canvas - Viewport controls (Desktop/Tablet/Mobile) - Export to React TSX, copy code, download file - Deploy with Hanzo integration - Real-time block rendering with dynamic imports Syntax Highlighting: - GitHub Light/Dark themes for automatic mode support - Multi-color syntax highlighting - Copy-to-clipboard, line numbers, line highlighting - Zero client-side JavaScript (static HTML) New Blocks: - newsletter-01 through newsletter-05 (5 variants) - blog-cards-01 (Modern blog post card layout) - photo-grid-01 (Responsive photo gallery) - showcase-marketing-01, showcase-ecommerce-01, showcase-app-ui-01 New Components: - ai-voice-settings (Voice configuration interface) New Documentation: - AI Actions, Agents, Assistant, Code, Models, Vision, Voice guides - Newsletter blocks documentation Bug Fixes: - Fixed block display registry access pattern - Stubbed billing-dependent blocks with instructions - Replaced iframe previews with direct component rendering - Eliminated 404 errors in block previews Technical Improvements: - Enhanced MDX configuration with Shiki rehype plugin - Integrated Fumadocs CodeBlock wrapper - Improved registry build error handling - Updated component props for better type safety CI/CD: - Added automatic npm publishing on tag creation - Tests must pass before publishing - Automatic GitHub release creation - Documentation deployment to GitHub Pages CHANGELOG: - Created comprehensive CHANGELOG.md with v0.2.0 release notes
10 lines
2.3 KiB
JSON
10 lines
2.3 KiB
JSON
{
|
|
"name": "kanban-demo",
|
|
"files": [
|
|
{
|
|
"name": "kanban-demo.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n KanbanBoard,\n type KanbanBoard as KanbanBoardType,\n} from \"@/registry/default/ui/kanban\"\n\nexport default function KanbanDemo() {\n const [board, setBoard] = React.useState<KanbanBoardType>({\n id: \"board-1\",\n title: \"Project Tasks\",\n labels: [\n { id: \"label-1\", name: \"Bug\", color: \"#ef4444\" },\n { id: \"label-2\", name: \"Feature\", color: \"#3b82f6\" },\n { id: \"label-3\", name: \"Docs\", color: \"#10b981\" },\n ],\n columns: [\n {\n id: \"todo\",\n title: \"To Do\",\n cards: [\n {\n id: \"card-1\",\n title: \"Setup project structure\",\n description:\n \"Initialize the basic project structure and configuration\",\n priority: \"high\",\n assignee: \"John\",\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n },\n ],\n },\n {\n id: \"in-progress\",\n title: \"In Progress\",\n cards: [\n {\n id: \"card-2\",\n title: \"Build authentication flow\",\n description: \"Implement login and signup functionality\",\n priority: \"urgent\",\n assignee: \"Sarah\",\n labels: [{ id: \"label-2\", name: \"Feature\", color: \"#3b82f6\" }],\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n },\n ],\n },\n {\n id: \"done\",\n title: \"Done\",\n cards: [\n {\n id: \"card-3\",\n title: \"Design system setup\",\n description: \"Setup Tailwind CSS and design tokens\",\n priority: \"medium\",\n assignee: \"Mike\",\n labels: [{ id: \"label-3\", name: \"Docs\", color: \"#10b981\" }],\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n },\n ],\n },\n ],\n })\n\n return (\n <div className=\"w-full h-[600px] border rounded-lg\">\n <KanbanBoard board={board} onUpdateBoard={setBoard} />\n </div>\n )\n}\n"
|
|
}
|
|
],
|
|
"type": "components:example"
|
|
} |