rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-02 08:58:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: www

Browse Source
This commit is contained in:
shadcn
2024-08-29 15:52:46 +04:00
parent 02cf3bc3f7
commit 4fe731d3e7
31 changed files with 414 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/www/__registry__/default/block/charts-01.tsx
View File

@@ -44,7 +44,9 @@ export default function Charts() {
return (
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
<Card
className="lg:max-w-md" x-chunk="charts-01-chunk-0"
>
<CardHeader className="space-y-0 pb-2">
<CardDescription>Today</CardDescription>
<CardTitle className="text-4xl tabular-nums">
@@ -170,7 +172,9 @@ export default function Charts() {
</CardDescription>
</CardFooter>
</Card>
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
<Card
className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
>
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
<div>
<CardDescription>Resting HR</CardDescription>
@@ -291,7 +295,9 @@ export default function Charts() {
</Card>
</div>
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-2"
>
<CardHeader>
<CardTitle>Progress</CardTitle>
<CardDescription>
@@ -403,7 +409,9 @@ export default function Charts() {
</div>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-3"
>
<CardHeader className="p-4 pb-0">
<CardTitle>Walking Distance</CardTitle>
<CardDescription>
@@ -485,7 +493,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-4"
>
<CardContent className="flex gap-4 p-4 pb-2">
<ChartContainer
config={{
@@ -592,7 +602,9 @@ export default function Charts() {
</Card>
</div>
<div className="grid w-full flex-1 gap-6">
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-5"
>
<CardContent className="flex gap-4 p-4">
<div className="grid items-center gap-2">
<div className="grid flex-1 auto-rows-min gap-0.5">
@@ -680,7 +692,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-6"
>
<CardHeader className="p-4 pb-0">
<CardTitle>Active Energy</CardTitle>
<CardDescription>
@@ -761,7 +775,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-7"
>
<CardHeader className="space-y-0 pb-0">
<CardDescription>Time in Bed</CardDescription>
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">

4
apps/www/__registry__/default/block/dashboard-01.tsx
View File

@@ -229,7 +229,9 @@ export default function Dashboard() {
</Card>
</div>
<div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
<Card
className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
>
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Transactions</CardTitle>

3
apps/www/__registry__/default/block/dashboard-02.tsx
View File

@@ -227,8 +227,7 @@ export default function Dashboard() {
<h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
x-chunk="dashboard-02-chunk-1"
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
>
<div className="flex flex-col items-center gap-1 text-center">
<h3 className="text-2xl font-bold tracking-tight">

6
apps/www/__registry__/default/block/dashboard-03.tsx
View File

@@ -302,8 +302,7 @@ export default function Dashboard() {
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
className="relative hidden flex-col items-start gap-8 md:flex"
x-chunk="dashboard-03-chunk-0"
className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
>
<form className="grid w-full items-start gap-6">
<fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
</Badge>
<div className="flex-1" />
<form
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
x-chunk="dashboard-03-chunk-1"
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
>
<Label htmlFor="message" className="sr-only">
Message

3
apps/www/__registry__/default/block/dashboard-04.tsx
View File

@@ -157,8 +157,7 @@ export default function Dashboard() {
</div>
<div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
<nav
className="grid gap-4 text-sm text-muted-foreground"
x-chunk="dashboard-04-chunk-0"
className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
>
<Link href="#" className="font-semibold text-primary">
General

8
apps/www/__registry__/default/block/dashboard-05.tsx
View File

@@ -283,7 +283,9 @@ export default function Dashboard() {
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
<Card
className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
>
<CardHeader className="pb-3">
<CardTitle>Your Orders</CardTitle>
<CardDescription className="max-w-lg text-balance leading-relaxed">
@@ -561,7 +563,9 @@ export default function Dashboard() {
</Tabs>
</div>
<div>
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<Card
className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
>
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">

3
apps/www/__registry__/default/block/dashboard-07.tsx
View File

@@ -535,8 +535,7 @@ export default function Dashboard() {
</CardContent>
</Card>
<Card
className="overflow-hidden"
x-chunk="dashboard-07-chunk-4"
className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
>
<CardHeader>
<CardTitle>Product Images</CardTitle>

7
apps/www/__registry__/default/block/sidebar-01.tsx
View File

@@ -8,9 +8,12 @@ export const iframeHeight = "870px"
export const containerClassName = "w-full h-full"
export default function Page() {
export default async function Page() {
const { cookies } = await import("next/headers")
return (
<SidebarLayout>
<SidebarLayout
defaultOpen={cookies().get("sidebar:state")?.value === "true"}
>
<AppSidebar />
<main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
<div className="h-full rounded-md border-2 border-dashed p-2">

32
apps/www/__registry__/new-york/block/charts-01.tsx
View File

@@ -44,7 +44,9 @@ export default function Charts() {
return (
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
<Card
className="lg:max-w-md" x-chunk="charts-01-chunk-0"
>
<CardHeader className="space-y-0 pb-2">
<CardDescription>Today</CardDescription>
<CardTitle className="text-4xl tabular-nums">
@@ -170,7 +172,9 @@ export default function Charts() {
</CardDescription>
</CardFooter>
</Card>
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
<Card
className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
>
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
<div>
<CardDescription>Resting HR</CardDescription>
@@ -291,7 +295,9 @@ export default function Charts() {
</Card>
</div>
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-2"
>
<CardHeader>
<CardTitle>Progress</CardTitle>
<CardDescription>
@@ -403,7 +409,9 @@ export default function Charts() {
</div>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-3"
>
<CardHeader className="p-4 pb-0">
<CardTitle>Walking Distance</CardTitle>
<CardDescription>
@@ -485,7 +493,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-4"
>
<CardContent className="flex gap-4 p-4 pb-2">
<ChartContainer
config={{
@@ -592,7 +602,9 @@ export default function Charts() {
</Card>
</div>
<div className="grid w-full flex-1 gap-6">
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-5"
>
<CardContent className="flex gap-4 p-4">
<div className="grid items-center gap-2">
<div className="grid flex-1 auto-rows-min gap-0.5">
@@ -680,7 +692,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-6"
>
<CardHeader className="p-4 pb-0">
<CardTitle>Active Energy</CardTitle>
<CardDescription>
@@ -761,7 +775,9 @@ export default function Charts() {
</ChartContainer>
</CardContent>
</Card>
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
<Card
className="max-w-xs" x-chunk="charts-01-chunk-7"
>
<CardHeader className="space-y-0 pb-0">
<CardDescription>Time in Bed</CardDescription>
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">

4
apps/www/__registry__/new-york/block/dashboard-01.tsx
View File

@@ -229,7 +229,9 @@ export default function Dashboard() {
</Card>
</div>
<div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
<Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
<Card
className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
>
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Transactions</CardTitle>

3
apps/www/__registry__/new-york/block/dashboard-02.tsx
View File

@@ -227,8 +227,7 @@ export default function Dashboard() {
<h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
</div>
<div
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
x-chunk="dashboard-02-chunk-1"
className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
>
<div className="flex flex-col items-center gap-1 text-center">
<h3 className="text-2xl font-bold tracking-tight">

6
apps/www/__registry__/new-york/block/dashboard-03.tsx
View File

@@ -302,8 +302,7 @@ export default function Dashboard() {
</header>
<main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
<div
className="relative hidden flex-col items-start gap-8 md:flex"
x-chunk="dashboard-03-chunk-0"
className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
>
<form className="grid w-full items-start gap-6">
<fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
</Badge>
<div className="flex-1" />
<form
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
x-chunk="dashboard-03-chunk-1"
className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
>
<Label htmlFor="message" className="sr-only">
Message

3
apps/www/__registry__/new-york/block/dashboard-04.tsx
View File

@@ -157,8 +157,7 @@ export default function Dashboard() {
</div>
<div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
<nav
className="grid gap-4 text-sm text-muted-foreground"
x-chunk="dashboard-04-chunk-0"
className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
>
<Link href="#" className="font-semibold text-primary">
General

8
apps/www/__registry__/new-york/block/dashboard-05.tsx
View File

@@ -284,7 +284,9 @@ export default function Dashboard() {
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
<Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
<Card
className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
>
<CardHeader className="pb-3">
<CardTitle>Your Orders</CardTitle>
<CardDescription className="text-balance max-w-lg leading-relaxed">
@@ -562,7 +564,9 @@ export default function Dashboard() {
</Tabs>
</div>
<div>
<Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
<Card
className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
>
<CardHeader className="flex flex-row items-start bg-muted/50">
<div className="grid gap-0.5">
<CardTitle className="group flex items-center gap-2 text-lg">

3
apps/www/__registry__/new-york/block/dashboard-07.tsx
View File

@@ -535,8 +535,7 @@ export default function Dashboard() {
</CardContent>
</Card>
<Card
className="overflow-hidden"
x-chunk="dashboard-07-chunk-4"
className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
>
<CardHeader>
<CardTitle>Product Images</CardTitle>

5
apps/www/__registry__/new-york/block/sidebar-01.tsx
View File

@@ -1,5 +1,3 @@
import { cookies } from "next/headers"
import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
import {
SidebarLayout,
@@ -10,7 +8,8 @@ export const iframeHeight = "870px"
export const containerClassName = "w-full h-full"
export default function Page() {
export default async function Page() {
const { cookies } = await import("next/headers")
return (
<SidebarLayout
defaultOpen={cookies().get("sidebar:state")?.value === "true"}

2
apps/www/app/(app)/sink/layout.tsx
View File

@@ -1,7 +1,7 @@
import Link from "next/link"
import { ThemeWrapper } from "@/components/theme-wrapper"
import { styles } from "@/registry/styles"
import { styles } from "@/registry/registry-styles"
interface SinkLayoutProps {
children: React.ReactNode

2
apps/www/components/component-preview.tsx
View File

@@ -16,7 +16,7 @@ import {
TabsList,
TabsTrigger,
} from "@/registry/new-york/ui/tabs"
import { styles } from "@/registry/styles"
import { styles } from "@/registry/registry-styles"
interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
name: string

2
apps/www/components/mdx-components.tsx
View File

@@ -36,7 +36,7 @@ import {
TabsList,
TabsTrigger,
} from "@/registry/new-york/ui/tabs"
import { Style } from "@/registry/styles"
import { Style } from "@/registry/registry-styles"
const components = {
Accordion,

2
apps/www/components/style-wrapper.tsx
View File

@@ -3,7 +3,7 @@
import * as React from "react"
import { useConfig } from "@/hooks/use-config"
import { Style } from "@/registry/styles"
import { Style } from "@/registry/registry-styles"
interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
styleName?: Style["name"]

2
apps/www/components/v0-button.tsx
View File

@@ -13,8 +13,8 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/registry/new-york/ui/tooltip"
import { Style } from "@/registry/registry-styles"
import { Block } from "@/registry/schema"
import { Style } from "@/registry/styles"
type Size = "default" | "icon"

6
apps/www/hooks/use-config.ts
View File

@@ -1,12 +1,12 @@
import { useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"
import { Style } from "@/registry/styles"
import { Theme } from "@/registry/themes"
import { BaseColor } from "@/registry/registry-base-colors"
import { Style } from "@/registry/registry-styles"
type Config = {
style: Style["name"]
theme: Theme["name"]
theme: BaseColor["name"]
radius: number
}

12
apps/www/public/registry/styles/default/sidebar-01.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/public/registry/styles/new-york/sidebar-01.json
View File

@@ -19,7 +19,7 @@
"files": [
{
"path": "block/sidebar-01/page.tsx",
"content": "import { cookies } from \"next/headers\"\n\nimport { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n SidebarLayout,\n SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default function Page() {\n return (\n <SidebarLayout\n defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n >\n <AppSidebar />\n <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n <SidebarTrigger />\n </div>\n </main>\n </SidebarLayout>\n )\n}\n",
"content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n SidebarLayout,\n SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default async function Page() {\n const { cookies } = await import(\"next/headers\")\n return (\n <SidebarLayout\n defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n >\n <AppSidebar />\n <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n <SidebarTrigger />\n </div>\n </main>\n </SidebarLayout>\n )\n}\n",
"type": "registry:page",
"target": "app/dashboard/page.tsx"
},

45
apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
View File

@@ -26,7 +26,14 @@ import { NavSecondary } from "@/registry/new-york/block/sidebar-01/components/na
import { NavUser } from "@/registry/new-york/block/sidebar-01/components/nav-user"
import { StorageCard } from "@/registry/new-york/block/sidebar-01/components/storage-card"
import { TeamSwitcher } from "@/registry/new-york/block/sidebar-01/components/team-switcher"
import { Sidebar } from "@/registry/new-york/block/sidebar-01/ui/sidebar"
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarItem,
SidebarLabel,
} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
export const iframeHeight = "870px"
@@ -60,6 +67,7 @@ const data = {
title: "Playground",
url: "#",
icon: SquareTerminal,
isActive: true,
items: [
{
title: "History",
@@ -247,24 +255,29 @@ const data = {
export function AppSidebar() {
return (
<Sidebar>
<div className="group relative flex h-12 items-center gap-2 border-b px-2.5 py-2 transition-all ease-in-out">
<SidebarHeader>
<TeamSwitcher teams={data.teams} />
</div>
<div className="flex flex-1 flex-col gap-5 overflow-auto py-4">
<NavProjects projects={data.projects} />
<NavMain
heading="Platform"
items={data.navMain}
searchResults={data.searchResults}
/>
<NavSecondary heading="Help" items={data.navSecondary} />
<div className="px-4">
</SidebarHeader>
<SidebarContent>
<SidebarItem>
<SidebarLabel>Platform</SidebarLabel>
<NavMain items={data.navMain} searchResults={data.searchResults} />
</SidebarItem>
<SidebarItem>
<SidebarLabel>Projects</SidebarLabel>
<NavProjects projects={data.projects} />
</SidebarItem>
<SidebarItem className="mt-auto">
<SidebarLabel>Help</SidebarLabel>
<NavSecondary items={data.navSecondary} />
</SidebarItem>
<SidebarItem>
<StorageCard />
</div>
</div>
<div className="border-t p-2">
</SidebarItem>
</SidebarContent>
<SidebarFooter>
<NavUser user={data.user} />
</div>
</SidebarFooter>
</Sidebar>
)
}

102
apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
View File

@@ -4,6 +4,7 @@ import Link from "next/link"
import { ChevronRight, Search, type LucideIcon } from "lucide-react"
import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
import { cn } from "@/registry/new-york/lib/utils"
import { Button } from "@/registry/new-york/ui/button"
import {
Collapsible,
@@ -24,75 +25,68 @@ import {
import { Separator } from "@/registry/new-york/ui/separator"
export function NavMain({
heading,
className,
items,
searchResults,
}: {
heading: string
items: {
title: string
url: string
icon: LucideIcon
isActive?: boolean
items?: {
title: string
url: string
}[]
}[]
searchResults: React.ComponentProps<typeof SidebarSearch>["results"]
}) {
} & React.ComponentProps<"ul">) {
return (
<nav className="grid gap-2 px-2.5">
{heading && (
<div className="px-1.5 text-xs font-medium text-muted-foreground">
{heading}
</div>
)}
<ul className="grid gap-0.5">
<li>
<SidebarSearch results={searchResults} />
</li>
{items.map((item, index) => (
<Collapsible key={item.title} asChild defaultOpen={index === 0}>
<li>
<div className="relative flex items-center">
<Link
href={item.url}
className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
<ul className={cn("grid gap-0.5", className)}>
<li>
<SidebarSearch results={searchResults} />
</li>
{items.map((item) => (
<Collapsible key={item.title} asChild defaultOpen={item.isActive}>
<li>
<div className="relative flex items-center">
<Link
href={item.url}
className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
>
<item.icon className="h-4 w-4 shrink-0" />
<div className="flex flex-1 overflow-hidden">
<div className="line-clamp-1 pr-6">{item.title}</div>
</div>
</Link>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
>
<item.icon className="h-4 w-4 shrink-0" />
<div className="flex flex-1 overflow-hidden">
<div className="line-clamp-1 pr-6">{item.title}</div>
</div>
</Link>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="px-4 py-0.5">
<ul className="grid border-l px-2">
{item.items?.map((subItem) => (
<li key={subItem.title}>
<Link
href={subItem.url}
className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
>
<div className="line-clamp-1">{subItem.title}</div>
</Link>
</li>
))}
</ul>
</CollapsibleContent>
</li>
</Collapsible>
))}
</ul>
</nav>
<ChevronRight className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="px-4 py-0.5">
<ul className="grid border-l px-2">
{item.items?.map((subItem) => (
<li key={subItem.title}>
<Link
href={subItem.url}
className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
>
<div className="line-clamp-1">{subItem.title}</div>
</Link>
</li>
))}
</ul>
</CollapsibleContent>
</li>
</Collapsible>
))}
</ul>
)
}

103
apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
View File

@@ -1,6 +1,7 @@
import Link from "next/link"
import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react"
import { cn } from "@/registry/new-york/lib/utils"
import { Button } from "@/registry/new-york/ui/button"
import {
DropdownMenu,
@@ -10,61 +11,59 @@ import {
DropdownMenuTrigger,
} from "@/registry/new-york/ui/dropdown-menu"
export type Project = {
name: string
url: string
icon: LucideIcon
}
export function NavProjects({ projects }: { projects: Project[] }) {
export function NavProjects({
projects,
className,
}: {
projects: {
name: string
url: string
icon: LucideIcon
}[]
} & React.ComponentProps<"ul">) {
return (
<nav className="grid gap-2 px-2.5">
<div className="px-1.5 text-xs font-medium text-muted-foreground">
Recent Projects
</div>
<ul className="grid gap-0.5">
{projects.map((item) => (
<li
key={item.name}
className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
<ul className={cn("grid gap-0.5", className)}>
{projects.map((item) => (
<li
key={item.name}
className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
>
<Link
href={item.url}
className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
>
<Link
href={item.url}
className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
>
<item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
{item.name}
</div>
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
>
<MoreHorizontal className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Toggle</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="start" sideOffset={20}>
<DropdownMenuItem>Share</DropdownMenuItem>
<DropdownMenuItem>Rename</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Archive</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
))}
<li>
<button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
<PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
Add Project
<item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
{item.name}
</div>
</button>
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
>
<MoreHorizontal className="h-4 w-4 text-muted-foreground" />
<span className="sr-only">Toggle</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="start" sideOffset={20}>
<DropdownMenuItem>Share</DropdownMenuItem>
<DropdownMenuItem>Rename</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Archive</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</li>
</ul>
</nav>
))}
<li>
<button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
<PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
Add Project
</div>
</button>
</li>
</ul>
)
}

59
apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
View File

@@ -3,46 +3,41 @@
import Link from "next/link"
import { type LucideIcon } from "lucide-react"
type NavItem = {
title: string
url: string
icon: LucideIcon
items?: Pick<NavItem, "title" | "url">[]
}
import { cn } from "@/registry/new-york/lib/utils"
export function NavSecondary({
heading,
className,
items,
}: {
heading?: string
items: NavItem[]
}) {
items: {
title: string
url: string
icon: LucideIcon
items?: {
title: string
url: string
}[]
}[]
} & React.ComponentProps<"ul">) {
if (!items?.length) {
return null
}
return (
<nav className="mt-auto grid gap-2 px-2.5">
{heading && (
<div className="px-1.5 text-xs font-medium text-muted-foreground">
{heading}
</div>
)}
<ul className="grid gap-0.5">
{items.map((item) => (
<li key={item.title}>
<Link
href={item.url}
className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
>
<item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
{item.title}
</div>
</Link>
</li>
))}
</ul>
</nav>
<ul className={cn("grid gap-0.5", className)}>
{items.map((item) => (
<li key={item.title}>
<Link
href={item.url}
className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
>
<item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
<div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
{item.title}
</div>
</Link>
</li>
))}
</ul>
)
}

7
apps/www/registry/default/block/sidebar-01/page.tsx
View File

@@ -8,9 +8,12 @@ export const iframeHeight = "870px"
export const containerClassName = "w-full h-full"
export default function Page() {
export default async function Page() {
const { cookies } = await import("next/headers")
return (
<SidebarLayout>
<SidebarLayout
defaultOpen={cookies().get("sidebar:state")?.value === "true"}
>
<AppSidebar />
<main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
<div className="h-full rounded-md border-2 border-dashed p-2">

199
apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
View File

@@ -3,44 +3,93 @@
import * as React from "react"
import { PanelLeft } from "lucide-react"
import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
import { cn } from "@/registry/new-york/lib/utils"
import { Button } from "@/registry/new-york/ui/button"
import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet"
function useSidebar() {
const [state, setState] = React.useState<"closed" | "open">("open")
export const SIDEBAR_STATE_COOKIE = "sidebar:state"
return {
open: state === "open",
onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
}
type SidebarContext = {
state: "open" | "closed"
open: boolean
onOpenChange: (open: boolean) => void
}
const SidebarContext = React.createContext<SidebarContext>({
state: "open",
open: true,
onOpenChange: () => {},
})
function useSidebar() {
return React.useContext(SidebarContext)
}
const SidebarLayout = React.forwardRef<
HTMLDivElement,
React.ComponentPropsWithoutRef<"div">
>((props, ref) => {
const { open } = useSidebar()
React.ComponentProps<"div"> & {
defaultOpen?: boolean
}
>(({ defaultOpen, className, ...props }, ref) => {
const [open, setOpen] = React.useState(defaultOpen ?? true)
const onOpenChange = React.useCallback((open: boolean) => {
setOpen(open)
document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${
60 * 60 * 24 * 7
}`
}, [])
const state = open ? "open" : "closed"
return (
<div
ref={ref}
data-sidebar={open}
style={
{
"--sidebar-width": "16rem",
} as React.CSSProperties
}
className="flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]"
{...props}
/>
<SidebarContext.Provider value={{ state, open, onOpenChange }}>
<div
ref={ref}
data-sidebar={state}
style={
{
"--sidebar-width": "16rem",
} as React.CSSProperties
}
className={cn(
"flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]",
className
)}
{...props}
/>
</SidebarContext.Provider>
)
})
SidebarLayout.displayName = "SidebarLayout"
const SidebarTrigger = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
const { open, onOpenChange } = useSidebar()
return (
<Button
ref={ref}
variant="ghost"
size="icon"
className={cn("h-8 w-8", className)}
onClick={() => onOpenChange(!open)}
{...props}
>
<PanelLeft className="h-4 w-4" />
<span className="sr-only">Toggle Sidebar</span>
</Button>
)
})
SidebarTrigger.displayName = "SidebarTrigger"
const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
({ className, children }, ref) => {
const { onOpenChange } = useSidebar()
const isMobile = useIsMobile()
const { open, onOpenChange } = useSidebar()
const sidebar = (
<div
@@ -51,42 +100,102 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
</div>
)
return (
<>
<aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
{sidebar}
</aside>
<Sheet onOpenChange={onOpenChange}>
<SheetContent className="p-0" side="left">
if (isMobile) {
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="w-[--sidebar-width] p-0" side="left">
{sidebar}
</SheetContent>
</Sheet>
</>
)
}
return (
<aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
{sidebar}
</aside>
)
}
)
Sidebar.displayName = "Sidebar"
const SidebarTrigger = React.forwardRef<
HTMLButtonElement,
React.ComponentProps<"button">
const SidebarHeader = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
const { onOpenChange } = useSidebar()
return (
<Button
<div
ref={ref}
variant="ghost"
size="sm"
className={cn("flex h-8 w-8 md:hidden", className)}
onClick={() => onOpenChange(!open)}
className={cn("flex items-center border-b px-2.5 py-2", className)}
{...props}
>
<PanelLeft className="absolute h-4 w-4" />
<span className="sr-only">Toggle Sidebar</span>
</Button>
/>
)
})
SidebarTrigger.displayName = "SidebarTrigger"
SidebarHeader.displayName = "SidebarHeader"
export { Sidebar, SidebarLayout, SidebarTrigger, useSidebar }
const SidebarFooter = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn("flex items-center border-t px-2.5 py-2", className)}
{...props}
/>
)
})
SidebarFooter.displayName = "SidebarFooter"
const SidebarContent = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn("flex flex-1 flex-col gap-5 overflow-auto py-4", className)}
{...props}
/>
)
})
SidebarContent.displayName = "SidebarContent"
const SidebarItem = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
return (
<div ref={ref} className={cn("grid gap-2 px-2.5", className)} {...props} />
)
})
SidebarItem.displayName = "SidebarItem"
const SidebarLabel = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
"px-1.5 text-xs font-medium text-muted-foreground",
className
)}
{...props}
/>
)
})
SidebarLabel.displayName = "SidebarLabel"
export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarItem,
SidebarLabel,
SidebarLayout,
SidebarTrigger,
useSidebar,
}

5
apps/www/registry/new-york/block/sidebar-01/page.tsx
View File

@@ -1,5 +1,3 @@
import { cookies } from "next/headers"
import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
import {
SidebarLayout,
@@ -10,7 +8,8 @@ export const iframeHeight = "870px"
export const containerClassName = "w-full h-full"
export default function Page() {
export default async function Page() {
const { cookies } = await import("next/headers")
return (
<SidebarLayout
defaultOpen={cookies().get("sidebar:state")?.value === "true"}