ui Architecture Docs
Home / File/ page-header.tsx — ui Source File

page-header.tsx — ui Source File

Architecture documentation for page-header.tsx, a tsx file in the ui codebase. 1 imports, 0 dependents.

File tsx Internationalization RTLLayout 1 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  c6bcf1ff_dd9a_e839_a986_f2b03391e80c["page-header.tsx"]
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  c6bcf1ff_dd9a_e839_a986_f2b03391e80c --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  style c6bcf1ff_dd9a_e839_a986_f2b03391e80c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { cn } from "@/lib/utils"

function PageHeader({
  className,
  children,
  ...props
}: React.ComponentProps<"section">) {
  return (
    <section className={cn("border-grid", className)} {...props}>
      <div className="container-wrapper">
        <div className="container flex flex-col items-center gap-2 px-6 py-8 text-center md:py-16 lg:py-20 xl:gap-4">
          {children}
        </div>
      </div>
    </section>
  )
}

function PageHeaderHeading({
  className,
  ...props
}: React.ComponentProps<"h1">) {
  return (
    <h1
      className={cn(
        "text-primary leading-tighter max-w-3xl text-3xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
        className
      )}
      {...props}
    />
  )
}

function PageHeaderDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      className={cn(
        "text-foreground max-w-4xl text-base text-balance sm:text-lg",
        className
      )}
      {...props}
    />
  )
}

function PageActions({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "flex w-full items-center justify-center gap-2 pt-2 **:data-[slot=button]:shadow-none",
        className
      )}
      {...props}
    />
  )
}

export { PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading }

Domain

Subdomains

Functions

Dependencies

  • utils

Source

Frequently Asked Questions

What does page-header.tsx do?
page-header.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, RTLLayout subdomain.
What functions are defined in page-header.tsx?
page-header.tsx defines 4 function(s): PageActions, PageHeader, PageHeaderDescription, PageHeaderHeading.
What does page-header.tsx depend on?
page-header.tsx imports 1 module(s): utils.
Where is page-header.tsx in the architecture?
page-header.tsx is located at apps/v4/components/page-header.tsx (domain: Internationalization, subdomain: RTLLayout, directory: apps/v4/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free