Files
zeekay afb155705a fix: Add 'use client' to all interactive blocks and fix registry structure
Fixed deployment issues for GitHub Pages static export:

Server Component Fixes:
- Added 'use client' to all login blocks (10 files)
- Added 'use client' to all signup blocks (10 files)
- Added 'use client' to all sidebar blocks (25 files)
- Added 'use client' to all OTP blocks (10 files)
- Fixed VersionSwitcher/SearchForm naming in sidebar-02

Registry Structure Fixes:
- Updated getRegistryItem() to use Index[style][name] pattern
- Updated getRegistryComponent() to accept style parameter
- Removed problematic Zod validation in blocks.ts
- Fixed null to undefined conversion in block metadata

Build Compatibility:
- Disabled Shiki syntax highlighting for static export
- Added HTML fallback for code blocks

Result: All 353 static pages now generate successfully
2025-10-18 22:59:23 -07:00

115 lines
2.8 KiB
TypeScript

"use client"
import * as React from "react"
import {
Bell,
Check,
Globe,
Home,
Keyboard,
Link,
Lock,
Menu,
MessageCircle,
Paintbrush,
Settings,
Video,
} from "lucide-react"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/registry/default/ui/breadcrumb"
import { Button } from "@/registry/default/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
DialogTrigger,
} from "@/registry/default/ui/dialog"
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from "@/registry/default/ui/sidebar"
const data = {
nav: [
{ name: "Notifications", icon: Bell },
{ name: "Navigation", icon: Menu },
{ name: "Home", icon: Home },
{ name: "Appearance", icon: Paintbrush },
{ name: "Messages & media", icon: MessageCircle },
{ name: "Language & region", icon: Globe },
{ name: "Accessibility", icon: Keyboard },
{ name: "Mark as read", icon: Check },
{ name: "Audio & video", icon: Video },
{ name: "Connected accounts", icon: Link },
{ name: "Privacy & visibility", icon: Lock },
{ name: "Advanced", icon: Settings },
],
}
function SettingsDialog() {
const [selectedItem, setSelectedItem] = React.useState<string | null>(null)
return (
<SidebarProvider>
<div className="flex w-full">
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{data.nav.map((item) => (
<SidebarMenuItem key={item.name}>
<SidebarMenuButton
onClick={() => setSelectedItem(item.name)}
isActive={selectedItem === item.name}
>
<item.icon className="h-4 w-4" />
<span>{item.name}</span>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<div className="flex-1 p-6">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{selectedItem || "Settings"}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</div>
</SidebarProvider>
)
}
export default function Page() {
return (
<div className="flex h-svh items-center justify-center">
<SettingsDialog />
</div>
)
}