mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-02 13:07:46 +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
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
KanbanBoard,
|
|
type KanbanBoard as KanbanBoardType,
|
|
} from "@/registry/default/ui/kanban"
|
|
|
|
export default function KanbanDemo() {
|
|
const [board, setBoard] = React.useState<KanbanBoardType>({
|
|
id: "board-1",
|
|
title: "Project Tasks",
|
|
labels: [
|
|
{ id: "label-1", name: "Bug", color: "#ef4444" },
|
|
{ id: "label-2", name: "Feature", color: "#3b82f6" },
|
|
{ id: "label-3", name: "Docs", color: "#10b981" },
|
|
],
|
|
columns: [
|
|
{
|
|
id: "todo",
|
|
title: "To Do",
|
|
cards: [
|
|
{
|
|
id: "card-1",
|
|
title: "Setup project structure",
|
|
description:
|
|
"Initialize the basic project structure and configuration",
|
|
priority: "high",
|
|
assignee: "John",
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "in-progress",
|
|
title: "In Progress",
|
|
cards: [
|
|
{
|
|
id: "card-2",
|
|
title: "Build authentication flow",
|
|
description: "Implement login and signup functionality",
|
|
priority: "urgent",
|
|
assignee: "Sarah",
|
|
labels: [{ id: "label-2", name: "Feature", color: "#3b82f6" }],
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "done",
|
|
title: "Done",
|
|
cards: [
|
|
{
|
|
id: "card-3",
|
|
title: "Design system setup",
|
|
description: "Setup Tailwind CSS and design tokens",
|
|
priority: "medium",
|
|
assignee: "Mike",
|
|
labels: [{ id: "label-3", name: "Docs", color: "#10b981" }],
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
|
|
return (
|
|
<div className="w-full h-[600px] border rounded-lg">
|
|
<KanbanBoard board={board} onUpdateBoard={setBoard} />
|
|
</div>
|
|
)
|
|
}
|