layout.tsx — ui Source File

Architecture documentation for layout.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx DocumentationAtlas Changelog 5 imports 1 functions

Entity Profile

DocumentationAtlas→ Changelog→ layout.tsx — ui Source File

Dependency Diagram

graph LR
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc["layout.tsx"]
  9c1a1e1b_87f8_29d5_c12d_e83869cf94e4["next"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc --> 9c1a1e1b_87f8_29d5_c12d_e83869cf94e4
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  ee1bd2ee_dc29_449d_093b_3c77e83b3561["announcement"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc --> ee1bd2ee_dc29_449d_093b_3c77e83b3561
  92027577_46c9_9cf9_86f6_c32f42e44e04["page-header"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc --> 92027577_46c9_9cf9_86f6_c32f42e44e04
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  132ecbb0_ef01_ba79_a682_5b4aaf1c77cc --> 57e86e45_ac6e_7278_be08_9092724e8401
  style 132ecbb0_ef01_ba79_a682_5b4aaf1c77cc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { type Metadata } from "next"
import Link from "next/link"

import { Announcement } from "@/components/announcement"
import {
  PageActions,
  PageHeader,
  PageHeaderDescription,
  PageHeaderHeading,
} from "@/components/page-header"
import { Button } from "@/registry/new-york-v4/ui/button"

const title = "Pick a Color. Make it yours."
const description =
  "Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon."

export const metadata: Metadata = {
  title,
  description,
  openGraph: {
    images: [
      {
        url: `/og?title=${encodeURIComponent(
          title
        )}&description=${encodeURIComponent(description)}`,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    images: [
      {
        url: `/og?title=${encodeURIComponent(
          title
        )}&description=${encodeURIComponent(description)}`,
      },
    ],
  },
}

export default function ThemesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>{title}</PageHeaderHeading>
        <PageHeaderDescription>{description}</PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <a href="#themes">Browse Themes</a>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <Link href="/docs/theming">Documentation</Link>
          </Button>
        </PageActions>
      </PageHeader>
      {children}
    </div>
  )
}