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

page.tsx — ui Source File

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

File tsx ComponentRegistry Styles 21 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  72f1b829_240b_a010_b4ad_dfef30ded6bf["page.tsx"]
  a3540ceb_2844_8613_0db0_875b37744ad4["cookie-settings.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> a3540ceb_2844_8613_0db0_875b37744ad4
  d67f12b2_e869_1f93_9b9c_f2228a0ec2aa["DemoCookieSettings"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> d67f12b2_e869_1f93_9b9c_f2228a0ec2aa
  87c1c5da_9621_c42c_2915_6af2689e019a["create-account.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 87c1c5da_9621_c42c_2915_6af2689e019a
  2f17757d_a16b_ce0e_e55f_a8a1490e1f4f["DemoCreateAccount"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 2f17757d_a16b_ce0e_e55f_a8a1490e1f4f
  fc80b2bb_65b5_0e15_d230_91f4d6fa1d87["date-picker.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> fc80b2bb_65b5_0e15_d230_91f4d6fa1d87
  90841eb0_53cb_5ac6_ad4c_951899c48446["DemoDatePicker"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 90841eb0_53cb_5ac6_ad4c_951899c48446
  6818e5cf_e2f7_6a2e_4d61_28a7db8e13b7["github-card.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 6818e5cf_e2f7_6a2e_4d61_28a7db8e13b7
  c74dcce4_e8f0_5adf_17b0_2566606e4ec9["DemoGithub"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> c74dcce4_e8f0_5adf_17b0_2566606e4ec9
  eafe3e81_63b8_26f4_88f6_e139c75b865c["notifications.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> eafe3e81_63b8_26f4_88f6_e139c75b865c
  582f4fe4_6339_37d4_6270_81b8668c8675["DemoNotifications"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 582f4fe4_6339_37d4_6270_81b8668c8675
  1b001a63_9fe5_be67_8015_5542d5f5d187["payment-method.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 1b001a63_9fe5_be67_8015_5542d5f5d187
  0afecd5f_235d_54a7_d6de_0b664947bd1c["DemoPaymentMethod"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> 0afecd5f_235d_54a7_d6de_0b664947bd1c
  ca3445f8_17de_5d00_8cf8_a14b4243cdeb["report-an-issue.tsx"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> ca3445f8_17de_5d00_8cf8_a14b4243cdeb
  a6ef57c2_c588_81d9_27d7_cd9cade11ad7["DemoReportAnIssue"]
  72f1b829_240b_a010_b4ad_dfef30ded6bf --> a6ef57c2_c588_81d9_27d7_cd9cade11ad7
  style 72f1b829_240b_a010_b4ad_dfef30ded6bf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Metadata } from "next"
import Image from "next/image"

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

import { DemoCookieSettings } from "./components/cookie-settings"
import { DemoCreateAccount } from "./components/create-account"
import { DemoDatePicker } from "./components/date-picker"
import { DemoGithub } from "./components/github-card"
import { DemoNotifications } from "./components/notifications"
import { DemoPaymentMethod } from "./components/payment-method"
import { DemoReportAnIssue } from "./components/report-an-issue"
import { DemoShareDocument } from "./components/share-document"
import { DemoTeamMembers } from "./components/team-members"

export const metadata: Metadata = {
  title: "Cards",
  description: "Examples of cards built using the components.",
}

function DemoContainer({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex items-center justify-center [&>div]:w-full",
        className
      )}
      {...props}
    />
  )
}

export default function CardsPage() {
  return (
    <>
      <div className="md:hidden">
        <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"
        />
      </div>
      <div className="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
        <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
          <DemoContainer>
            <DemoCreateAccount />
          </DemoContainer>
          <DemoContainer>
            <DemoPaymentMethod />
          </DemoContainer>
        </div>
        <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
          <DemoContainer>
            <DemoTeamMembers />
          </DemoContainer>
          <DemoContainer>
            <DemoShareDocument />
          </DemoContainer>
          <DemoContainer>
            <DemoDatePicker />
          </DemoContainer>
          <DemoContainer>
            <DemoNotifications />
          </DemoContainer>
        </div>
        <div className="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
          <DemoContainer>
            <DemoReportAnIssue />
          </DemoContainer>
          <DemoContainer>
            <DemoGithub />
          </DemoContainer>
          <DemoContainer>
            <DemoCookieSettings />
          </DemoContainer>
        </div>
      </div>
    </>
  )
}

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does page.tsx do?
page.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, Styles subdomain.
What functions are defined in page.tsx?
page.tsx defines 2 function(s): CardsPage, DemoContainer.
What does page.tsx depend on?
page.tsx imports 21 module(s): DemoCookieSettings, DemoCreateAccount, DemoDatePicker, DemoGithub, DemoNotifications, DemoPaymentMethod, DemoReportAnIssue, DemoShareDocument, and 13 more.
Where is page.tsx in the architecture?
page.tsx is located at deprecated/www/app/(app)/examples/cards/page.tsx (domain: ComponentRegistry, subdomain: Styles, directory: deprecated/www/app/(app)/examples/cards).

Analyze Your Own Codebase

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

Try Supermodel Free