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. 17 imports, 0 dependents.

File tsx ComponentRegistry Styles 17 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  054ca25e_f665_64b0_351d_ed2a653946c8["page.tsx"]
  c131b0f2_30cc_26c0_60da_6ff8d0a57400["album-artwork.tsx"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> c131b0f2_30cc_26c0_60da_6ff8d0a57400
  c9807a72_da3a_4ab9_6654_e0cedf256297["AlbumArtwork"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> c9807a72_da3a_4ab9_6654_e0cedf256297
  b8fdcce6_f818_9a9a_fe0e_32f7caaf52cd["menu.tsx"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> b8fdcce6_f818_9a9a_fe0e_32f7caaf52cd
  4174fb28_6808_62b0_0887_c13460f60b28["Menu"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 4174fb28_6808_62b0_0887_c13460f60b28
  7bf3c9a7_5543_4076_d271_bf398ef60dbc["podcast-empty-placeholder.tsx"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 7bf3c9a7_5543_4076_d271_bf398ef60dbc
  792233f9_d2d0_b2ba_bdc5_4b67b9a35597["PodcastEmptyPlaceholder"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 792233f9_d2d0_b2ba_bdc5_4b67b9a35597
  2c088549_d62b_0edf_84f1_877cd2093245["sidebar.tsx"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 2c088549_d62b_0edf_84f1_877cd2093245
  c7d33bbc_10fd_1ff7_721c_9594cc979987["Sidebar"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> c7d33bbc_10fd_1ff7_721c_9594cc979987
  4ce849f6_3650_d3c5_9f5f_a21c173777bc["albums.ts"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 4ce849f6_3650_d3c5_9f5f_a21c173777bc
  163e8432_9f96_406b_3feb_33518ea942ea["playlists.ts"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 163e8432_9f96_406b_3feb_33518ea942ea
  9c1a1e1b_87f8_29d5_c12d_e83869cf94e4["next"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 9c1a1e1b_87f8_29d5_c12d_e83869cf94e4
  3eb36dd7_f51a_1431_02e2_7abafe315718["image"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> 3eb36dd7_f51a_1431_02e2_7abafe315718
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  054ca25e_f665_64b0_351d_ed2a653946c8 --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  style 054ca25e_f665_64b0_351d_ed2a653946c8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Metadata } from "next"
import Image from "next/image"
import { PlusCircle } from "lucide-react"

import { Button } from "@/registry/new-york/ui/button"
import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
import { Separator } from "@/registry/new-york/ui/separator"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/registry/new-york/ui/tabs"

import { AlbumArtwork } from "./components/album-artwork"
import { Menu } from "./components/menu"
import { PodcastEmptyPlaceholder } from "./components/podcast-empty-placeholder"
import { Sidebar } from "./components/sidebar"
import { listenNowAlbums, madeForYouAlbums } from "./data/albums"
import { playlists } from "./data/playlists"

export const metadata: Metadata = {
  title: "Music App",
  description: "Example music app using the components.",
}

export default function MusicPage() {
  return (
    <>
      <div className="md:hidden">
        <Image
          src="/examples/music-light.png"
          width={1280}
          height={1114}
          alt="Music"
          className="block dark:hidden"
        />
        <Image
          src="/examples/music-dark.png"
          width={1280}
          height={1114}
          alt="Music"
          className="hidden dark:block"
        />
      </div>
      <div className="hidden md:block">
        <Menu />
        <div className="border-t">
          <div className="bg-background">
            <div className="grid lg:grid-cols-5">
              <Sidebar playlists={playlists} className="hidden lg:block" />
              <div className="col-span-3 lg:col-span-4 lg:border-l">
                <div className="h-full px-4 py-6 lg:px-8">
                  <Tabs defaultValue="music" className="h-full space-y-6">
                    <div className="space-between flex items-center">
                      <TabsList>
                        <TabsTrigger value="music" className="relative">
                          Music
                        </TabsTrigger>
                        <TabsTrigger value="podcasts">Podcasts</TabsTrigger>
// ... (98 more lines)

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 1 function(s): MusicPage.
What does page.tsx depend on?
page.tsx imports 17 module(s): AlbumArtwork, Menu, PodcastEmptyPlaceholder, Sidebar, album-artwork.tsx, albums.ts, button, image, and 9 more.
Where is page.tsx in the architecture?
page.tsx is located at deprecated/www/app/(app)/examples/music/page.tsx (domain: ComponentRegistry, subdomain: Styles, directory: deprecated/www/app/(app)/examples/music).

Analyze Your Own Codebase

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

Try Supermodel Free