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
92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Badge } from "@/registry/default/ui/badge"
|
|
|
|
interface ShowcaseItem {
|
|
id: string
|
|
title: string
|
|
count: string
|
|
image: string
|
|
imageDark: string
|
|
badge?: string
|
|
href: string
|
|
}
|
|
|
|
const items: ShowcaseItem[] = [
|
|
{
|
|
id: "1",
|
|
title: "Landing Pages",
|
|
count: "8 examples",
|
|
image: "/placeholder.svg?height=480&width=708",
|
|
imageDark: "/placeholder.svg?height=480&width=708",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Pricing Pages",
|
|
count: "5 examples",
|
|
image: "/placeholder.svg?height=480&width=708",
|
|
imageDark: "/placeholder.svg?height=480&width=708",
|
|
badge: "New",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "About Pages",
|
|
count: "4 examples",
|
|
image: "/placeholder.svg?height=480&width=708",
|
|
imageDark: "/placeholder.svg?height=480&width=708",
|
|
href: "#",
|
|
},
|
|
]
|
|
|
|
export default function BlockShowcaseMarketing01() {
|
|
return (
|
|
<section className="container px-4 py-24 mx-auto">
|
|
<div className="mb-8">
|
|
<h3 className="font-mono text-sm font-medium tracking-widest uppercase text-muted-foreground">
|
|
Marketing Pages
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.id}
|
|
href={item.href}
|
|
className="block transition hover:bg-accent rounded-lg"
|
|
>
|
|
<div className="relative p-2">
|
|
<img
|
|
src={item.image}
|
|
alt={item.title}
|
|
className="aspect-[708/480] w-full rounded-md border shadow-sm dark:hidden"
|
|
/>
|
|
<img
|
|
src={item.imageDark}
|
|
alt={item.title}
|
|
className="aspect-[708/480] w-full rounded-md border shadow-sm hidden dark:block"
|
|
/>
|
|
</div>
|
|
<div className="px-4 py-2 sm:px-2">
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm font-medium">{item.title}</p>
|
|
{item.badge && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{item.badge}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="font-mono text-xs text-muted-foreground">
|
|
{item.count}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|