Skip to content

Commit bed277c

Browse files
shadcnshadcn
authored
feat( www): minor updates (#5749)
* feat(www): update mode switcher * feat(www): update layout * feat(www): update theme-color handling * fix(www): docs pages
1 parent f7c4216 commit bed277c

25 files changed

+321
-411
lines changed

‎apps/www/app/(app)/blocks/layout.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function BlocksLayout({
2121
children: React.ReactNode
2222
}) {
2323
return (
24-
<div className="container relative">
24+
<div className="relative">
2525
<PageHeader>
2626
<Announcement />
2727
<PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
@@ -42,9 +42,11 @@ export default function BlocksLayout({
4242
</Button>
4343
</PageActions>
4444
</PageHeader>
45-
<section id="blocks" className="scroll-mt-24">
46-
{children}
47-
</section>
45+
<div className="container py-6">
46+
<section id="blocks" className="scroll-mt-24">
47+
{children}
48+
</section>
49+
</div>
4850
</div>
4951
)
5052
}

‎apps/www/app/(app)/charts/layout.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function ChartsLayout({
2222
children: React.ReactNode
2323
}) {
2424
return (
25-
<div className="container relative">
25+
<div className="relative">
2626
<PageHeader>
2727
<Announcement />
2828
<PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
@@ -38,9 +38,11 @@ export default function ChartsLayout({
3838
</Button>
3939
</PageActions>
4040
</PageHeader>
41-
<section id="charts" className="scroll-mt-20">
42-
{children}
43-
</section>
41+
<div className="container py-6">
42+
<section id="charts" className="scroll-mt-20">
43+
{children}
44+
</section>
45+
</div>
4446
</div>
4547
)
4648
}

‎apps/www/app/(app)/colors/layout.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function ColorsLayout({
2121
children: React.ReactNode
2222
}) {
2323
return (
24-
<div className="container relative">
24+
<div className="relative">
2525
<PageHeader>
2626
<Announcement />
2727
<PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
@@ -37,9 +37,11 @@ export default function ColorsLayout({
3737
</Button>
3838
</PageActions>
3939
</PageHeader>
40-
<section id="colors" className="scroll-mt-20">
41-
{children}
42-
</section>
40+
<div className="container py-6">
41+
<section id="colors" className="scroll-mt-20">
42+
{children}
43+
</section>
44+
</div>
4345
</div>
4446
)
4547
}

‎apps/www/app/(app)/docs/[[...slug]]/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,10 @@ export default async function DocPage({ params }: DocPageProps) {
138138
</div>
139139
<div className="hidden text-sm xl:block">
140140
<div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
141-
<ScrollArea className="h-full pb-10">
141+
<div className="no-scrollbar h-full overflow-auto pb-10">
142142
{doc.toc && <DashboardTableOfContents toc={toc} />}
143143
<OpenInV0Cta className="mt-6 max-w-[80%]" />
144-
</ScrollArea>
144+
</div>
145145
</div>
146146
</div>
147147
</main>

‎apps/www/app/(app)/docs/layout.tsx

+7-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,13 @@ interface DocsLayoutProps {
88

99
export default function DocsLayout({ children }: DocsLayoutProps) {
1010
return (
11-
<div className="border-b border-border/40 dark:border-border">
12-
<div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
13-
<aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
14-
<ScrollArea className="h-full py-6 pr-6 lg:py-8">
15-
<DocsSidebarNav config={docsConfig} />
16-
</ScrollArea>
17-
</aside>
18-
{children}
19-
</div>
11+
<div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
12+
<aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
13+
<div className="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
14+
<DocsSidebarNav config={docsConfig} />
15+
</div>
16+
</aside>
17+
{children}
2018
</div>
2119
)
2220
}

‎apps/www/app/(app)/examples/layout.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Metadata } from "next"
22
import Link from "next/link"
33

4-
import { cn } from "@/lib/utils"
54
import { Announcement } from "@/components/announcement"
65
import { ExamplesNav } from "@/components/examples-nav"
76
import {
@@ -10,7 +9,7 @@ import {
109
PageHeaderDescription,
1110
PageHeaderHeading,
1211
} from "@/components/page-header"
13-
import { Button, buttonVariants } from "@/registry/new-york/ui/button"
12+
import { Button } from "@/registry/new-york/ui/button"
1413

1514
export const metadata: Metadata = {
1615
title: "Examples",
@@ -23,7 +22,7 @@ interface ExamplesLayoutProps {
2322

2423
export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
2524
return (
26-
<div className="container relative">
25+
<div className="relative">
2726
<PageHeader>
2827
<Announcement />
2928
<PageHeaderHeading className="hidden md:block">
@@ -43,12 +42,14 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
4342
</Button>
4443
</PageActions>
4544
</PageHeader>
46-
<section>
47-
<ExamplesNav />
48-
<div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
49-
{children}
50-
</div>
51-
</section>
45+
<div className="container py-6">
46+
<section>
47+
<ExamplesNav />
48+
<div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
49+
{children}
50+
</div>
51+
</section>
52+
</div>
5253
</div>
5354
)
5455
}

‎apps/www/app/(app)/layout.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ interface AppLayoutProps {
77

88
export default function AppLayout({ children }: AppLayoutProps) {
99
return (
10-
<div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
11-
<SiteHeader />
12-
<main className="flex-1">{children}</main>
13-
<SiteFooter />
10+
<div data-wrapper="" className="border-border/40 dark:border-border">
11+
<div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
12+
<SiteHeader />
13+
<main className="flex-1">{children}</main>
14+
<SiteFooter />
15+
</div>
1416
</div>
1517
)
1618
}

‎apps/www/app/(app)/page.tsx

+23-21
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Button } from "@/registry/new-york/ui/button"
1515

1616
export default function IndexPage() {
1717
return (
18-
<div className="container relative">
18+
<div className="relative">
1919
<PageHeader>
2020
<Announcement />
2121
<PageHeaderHeading>Build your component library</PageHeaderHeading>
@@ -38,26 +38,28 @@ export default function IndexPage() {
3838
</Button>
3939
</PageActions>
4040
</PageHeader>
41-
<ExamplesNav className="[&>a:first-child]:text-primary" />
42-
<section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
43-
<Image
44-
src="/examples/cards-light.png"
45-
width={1280}
46-
height={1214}
47-
alt="Cards"
48-
className="block dark:hidden"
49-
/>
50-
<Image
51-
src="/examples/cards-dark.png"
52-
width={1280}
53-
height={1214}
54-
alt="Cards"
55-
className="hidden dark:block"
56-
/>
57-
</section>
58-
<section className="hidden md:block [&>div]:p-0">
59-
<CardsNewYork />
60-
</section>
41+
<div className="container py-6">
42+
<ExamplesNav className="[&>a:first-child]:text-primary" />
43+
<section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
44+
<Image
45+
src="/examples/cards-light.png"
46+
width={1280}
47+
height={1214}
48+
alt="Cards"
49+
className="block dark:hidden"
50+
/>
51+
<Image
52+
src="/examples/cards-dark.png"
53+
width={1280}
54+
height={1214}
55+
alt="Cards"
56+
className="hidden dark:block"
57+
/>
58+
</section>
59+
<section className="hidden md:block [&>div]:p-0">
60+
<CardsNewYork />
61+
</section>
62+
</div>
6163
</div>
6264
)
6365
}

‎apps/www/app/(app)/themes/layout.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Metadata } from "next"
2+
3+
import { Announcement } from "@/components/announcement"
4+
import {
5+
PageActions,
6+
PageHeader,
7+
PageHeaderDescription,
8+
PageHeaderHeading,
9+
} from "@/components/page-header"
10+
import { ThemeCustomizer } from "@/components/theme-customizer"
11+
import { ThemeWrapper } from "@/components/theme-wrapper"
12+
13+
export const metadata: Metadata = {
14+
title: "Themes",
15+
description: "Hand-picked themes that you can copy and paste into your apps.",
16+
}
17+
18+
export default function ThemesLayout({
19+
children,
20+
}: {
21+
children: React.ReactNode
22+
}) {
23+
return (
24+
<div className="relative">
25+
<ThemeWrapper
26+
defaultTheme="zinc"
27+
className="relative flex w-full flex-col items-start md:flex-row"
28+
>
29+
<PageHeader>
30+
<Announcement />
31+
<PageHeaderHeading className="hidden md:block">
32+
Add colors. Make it yours.
33+
</PageHeaderHeading>
34+
<PageHeaderHeading className="md:hidden">
35+
Make it yours
36+
</PageHeaderHeading>
37+
<PageHeaderDescription>
38+
Hand-picked themes that you can copy and paste into your apps.
39+
</PageHeaderDescription>
40+
<PageActions>
41+
<ThemeCustomizer />
42+
</PageActions>
43+
</PageHeader>
44+
</ThemeWrapper>
45+
<div className="container py-6">
46+
<section id="themes" className="scroll-mt-20">
47+
{children}
48+
</section>
49+
</div>
50+
</div>
51+
)
52+
}

‎apps/www/app/(app)/themes/page.tsx

+2-41
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,7 @@
1-
import { Metadata } from "next"
2-
3-
import "public/registry/themes.css"
4-
import { Announcement } from "@/components/announcement"
5-
import {
6-
PageActions,
7-
PageHeader,
8-
PageHeaderDescription,
9-
PageHeaderHeading,
10-
} from "@/components/page-header"
11-
import { ThemeCustomizer } from "@/components/theme-customizer"
12-
import { ThemeWrapper } from "@/components/theme-wrapper"
131
import { ThemesTabs } from "@/app/(app)/themes/tabs"
142

15-
export const metadata: Metadata = {
16-
title: "Themes",
17-
description: "Hand-picked themes that you can copy and paste into your apps.",
18-
}
3+
import "public/registry/themes.css"
194

205
export default function ThemesPage() {
21-
return (
22-
<div className="container">
23-
<ThemeWrapper
24-
defaultTheme="zinc"
25-
className="relative flex w-full flex-col items-start md:flex-row"
26-
>
27-
<PageHeader className="w-full">
28-
<Announcement />
29-
<PageHeaderHeading className="hidden md:block">
30-
Add colors. Make it yours.
31-
</PageHeaderHeading>
32-
<PageHeaderHeading className="md:hidden">
33-
Make it yours
34-
</PageHeaderHeading>
35-
<PageHeaderDescription>
36-
Hand-picked themes that you can copy and paste into your apps.
37-
</PageHeaderDescription>
38-
<PageActions>
39-
<ThemeCustomizer />
40-
</PageActions>
41-
</PageHeader>
42-
</ThemeWrapper>
43-
<ThemesTabs />
44-
</div>
45-
)
6+
return <ThemesTabs />
467
}

0 commit comments

Comments
 (0)