Merge branch 'main' of github.com:shadcn-ui/ui

shadcn-ui · Nov 6, 2024 · b8ed303 · b8ed303
2 parents 13c97ac + bed277c
commit b8ed303
Show file tree

Hide file tree

Showing 25 changed files with 321 additions and 411 deletions.
diff --git a/apps/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx
@@ -21,7 +21,7 @@ export default function BlocksLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
@@ -42,9 +42,11 @@ export default function BlocksLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="blocks" className="scroll-mt-24">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="blocks" className="scroll-mt-24">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/charts/layout.tsx b/apps/www/app/(app)/charts/layout.tsx
@@ -22,7 +22,7 @@ export default function ChartsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
@@ -38,9 +38,11 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="charts" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx
@@ -21,7 +21,7 @@ export default function ColorsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
@@ -37,9 +37,11 @@ export default function ColorsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="colors" className="scroll-mt-20">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="colors" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -138,10 +138,10 @@ export default async function DocPage({ params }: DocPageProps) {
       </div>
       <div className="hidden text-sm xl:block">
         <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
-          <ScrollArea className="h-full pb-10">
+          <div className="no-scrollbar h-full overflow-auto pb-10">
             {doc.toc && <DashboardTableOfContents toc={toc} />}
             <OpenInV0Cta className="mt-6 max-w-[80%]" />
-          </ScrollArea>
+          </div>
         </div>
       </div>
     </main>

diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx
@@ -8,15 +8,13 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="border-b border-border/40 dark:border-border">
-      <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">
-        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
-          <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-            <DocsSidebarNav config={docsConfig} />
-          </ScrollArea>
-        </aside>
-        {children}
-      </div>
+    <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">
+      <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">
+        <div className="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
+          <DocsSidebarNav config={docsConfig} />
+        </div>
+      </aside>
+      {children}
     </div>
   )
 }
diff --git a/apps/www/app/(app)/examples/layout.tsx b/apps/www/app/(app)/examples/layout.tsx
@@ -1,7 +1,6 @@
 import { Metadata } from "next"
 import Link from "next/link"
 
-import { cn } from "@/lib/utils"
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
@@ -10,7 +9,7 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { Button, buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 export const metadata: Metadata = {
   title: "Examples",
@@ -23,7 +22,7 @@ interface ExamplesLayoutProps {
 
 export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading className="hidden md:block">
@@ -43,12 +42,14 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
           </Button>
         </PageActions>
       </PageHeader>
-      <section>
-        <ExamplesNav />
-        <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-          {children}
-        </div>
-      </section>
+      <div className="container py-6">
+        <section>
+          <ExamplesNav />
+          <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+            {children}
+          </div>
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx
@@ -7,10 +7,12 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
-      <SiteHeader />
-      <main className="flex-1">{children}</main>
-      <SiteFooter />
+    <div data-wrapper="" className="border-border/40 dark:border-border">
+      <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+        <SiteHeader />
+        <main className="flex-1">{children}</main>
+        <SiteFooter />
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
@@ -15,7 +15,7 @@ import { Button } from "@/registry/new-york/ui/button"
 
 export default function IndexPage() {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Build your component library</PageHeaderHeading>
@@ -38,26 +38,28 @@ export default function IndexPage() {
           </Button>
         </PageActions>
       </PageHeader>
-      <ExamplesNav className="[&>a:first-child]:text-primary" />
-      <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
-        <Image
-          src="/examples/cards-light.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/cards-dark.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="hidden dark:block"
-        />
-      </section>
-      <section className="hidden md:block [&>div]:p-0">
-        <CardsNewYork />
-      </section>
+      <div className="container py-6">
+        <ExamplesNav className="[&>a:first-child]:text-primary" />
+        <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
+          <Image
+            src="/examples/cards-light.png"
+            width={1280}
+            height={1214}
+            alt="Cards"
+            className="block dark:hidden"
+          />
+          <Image
+            src="/examples/cards-dark.png"
+            width={1280}
+            height={1214}
+            alt="Cards"
+            className="hidden dark:block"
+          />
+        </section>
+        <section className="hidden md:block [&>div]:p-0">
+          <CardsNewYork />
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/themes/layout.tsx b/apps/www/app/(app)/themes/layout.tsx
@@ -0,0 +1,52 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { ThemeCustomizer } from "@/components/theme-customizer"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+
+export const metadata: Metadata = {
+  title: "Themes",
+  description: "Hand-picked themes that you can copy and paste into your apps.",
+}
+
+export default function ThemesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="relative">
+      <ThemeWrapper
+        defaultTheme="zinc"
+        className="relative flex w-full flex-col items-start md:flex-row"
+      >
+        <PageHeader>
+          <Announcement />
+          <PageHeaderHeading className="hidden md:block">
+            Add colors. Make it yours.
+          </PageHeaderHeading>
+          <PageHeaderHeading className="md:hidden">
+            Make it yours
+          </PageHeaderHeading>
+          <PageHeaderDescription>
+            Hand-picked themes that you can copy and paste into your apps.
+          </PageHeaderDescription>
+          <PageActions>
+            <ThemeCustomizer />
+          </PageActions>
+        </PageHeader>
+      </ThemeWrapper>
+      <div className="container py-6">
+        <section id="themes" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/app/(app)/themes/page.tsx b/apps/www/app/(app)/themes/page.tsx
@@ -1,46 +1,7 @@
-import { Metadata } from "next"
-
-import "public/registry/themes.css"
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { ThemeCustomizer } from "@/components/theme-customizer"
-import { ThemeWrapper } from "@/components/theme-wrapper"
 import { ThemesTabs } from "@/app/(app)/themes/tabs"
 
-export const metadata: Metadata = {
-  title: "Themes",
-  description: "Hand-picked themes that you can copy and paste into your apps.",
-}
+import "public/registry/themes.css"
 
 export default function ThemesPage() {
-  return (
-    <div className="container">
-      <ThemeWrapper
-        defaultTheme="zinc"
-        className="relative flex w-full flex-col items-start md:flex-row"
-      >
-        <PageHeader className="w-full">
-          <Announcement />
-          <PageHeaderHeading className="hidden md:block">
-            Add colors. Make it yours.
-          </PageHeaderHeading>
-          <PageHeaderHeading className="md:hidden">
-            Make it yours
-          </PageHeaderHeading>
-          <PageHeaderDescription>
-            Hand-picked themes that you can copy and paste into your apps.
-          </PageHeaderDescription>
-          <PageActions>
-            <ThemeCustomizer />
-          </PageActions>
-        </PageHeader>
-      </ThemeWrapper>
-      <ThemesTabs />
-    </div>
-  )
+  return <ThemesTabs />
 }