mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
0d27851745
Multiple comprehensive fixes to improve UI/UX across the documentation site: 1. Themes Page: - Changed default theme from "blue" to "neutral" to match shadcn/ui - Updated active-theme.tsx to use "neutral" as DEFAULT_THEME 2. Builder Page (/builder): - Fixed block/component visibility (registry access updated for flat structure) - Added "Open in H" button to toolbar - Fixed drag handles visibility with proper left padding (pl-16) - Updated registry access from Index.default[name] to Index[name] 3. Code Previews: - Fixed missing code previews in documentation pages - ComponentPreview now fetches code from registry JSON files - Added "use client" directive for proper hydration - Falls back to registry when MDX doesn't provide code children 4. Tabs Component: - Cleaned up styling and removed complex dark mode classes - Added smooth transitions (transition-all, transition-colors) - Consistent height (h-10) across all tab implementations - Fixed MDX overrides to match base component styling 5. Logo Fix: - Updated HanzoLogo to always use black fill (#000000) - Removed text-current class that was causing theme inheritance - Ensures black H appears correctly in both light and dark modes 6. Missing Components: - Added 5 missing demo components: android, code-block, code-tabs, gantt, sandbox - Created placeholder UI components for gantt, sandbox, code-tabs - Updated registry/examples.ts and registry/ui.ts Build Status: ✅ All pages render correctly ✅ Code previews working ✅ Themes display properly ✅ Builder fully functional ✅ Drag and drop working ✅ No console errors
90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Index } from "@/__registry__"
|
|
|
|
interface BuilderPreviewProps {
|
|
name: string
|
|
type: "block" | "component"
|
|
scale?: number
|
|
}
|
|
|
|
class ErrorBoundary extends React.Component<
|
|
{ children: React.ReactNode; fallback: React.ReactNode },
|
|
{ hasError: boolean }
|
|
> {
|
|
constructor(props: any) {
|
|
super(props)
|
|
this.state = { hasError: false }
|
|
}
|
|
|
|
static getDerivedStateFromError() {
|
|
return { hasError: true }
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return this.props.fallback
|
|
}
|
|
return this.props.children
|
|
}
|
|
}
|
|
|
|
export function BuilderPreview({ name, type, scale = 1 }: BuilderPreviewProps) {
|
|
// Get the component from the registry (flat structure)
|
|
const registryKey = name
|
|
const registryItem = Index[registryKey]
|
|
|
|
if (!registryItem || !registryItem.component) {
|
|
return <PreviewPlaceholder name={name} type={type} error />
|
|
}
|
|
|
|
const Component = registryItem.component
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
transform: `scale(${scale})`,
|
|
transformOrigin: "top left",
|
|
width: `${100 / scale}%`,
|
|
height: type === "block" ? `${600 / scale}px` : `${200 / scale}px`,
|
|
}}
|
|
className="overflow-hidden bg-background"
|
|
>
|
|
<ErrorBoundary
|
|
fallback={<PreviewPlaceholder name={name} type={type} error />}
|
|
>
|
|
<React.Suspense
|
|
fallback={<PreviewPlaceholder name={name} type={type} />}
|
|
>
|
|
<Component />
|
|
</React.Suspense>
|
|
</ErrorBoundary>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function PreviewPlaceholder({
|
|
name,
|
|
type,
|
|
error = false,
|
|
}: {
|
|
name: string
|
|
type: "block" | "component"
|
|
error?: boolean
|
|
}) {
|
|
return (
|
|
<div className="flex min-h-[120px] items-center justify-center rounded-lg border-2 border-dashed bg-muted/30 p-8">
|
|
<div className="text-center">
|
|
<p className="text-sm font-medium">{name}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground capitalize">{type}</p>
|
|
{error ? (
|
|
<p className="mt-2 text-xs text-destructive">Not available</p>
|
|
) : (
|
|
<p className="mt-2 text-xs text-muted-foreground">Loading...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|