ui Architecture Docs
Home / File/ carousel-demo.tsx — ui Source File

carousel-demo.tsx — ui Source File

Architecture documentation for carousel-demo.tsx, a tsx file in the ui codebase. 3 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 3 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  246e83ce_0135_1944_b91c_5f013b2859b3["carousel-demo.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  246e83ce_0135_1944_b91c_5f013b2859b3 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  c6d6139d_ea69_3d79_5004_68419bae2ac0["card"]
  246e83ce_0135_1944_b91c_5f013b2859b3 --> c6d6139d_ea69_3d79_5004_68419bae2ac0
  0a2a99e8_d3cf_faf2_ffc2_338ee3d9c8f3["carousel"]
  246e83ce_0135_1944_b91c_5f013b2859b3 --> 0a2a99e8_d3cf_faf2_ffc2_338ee3d9c8f3
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 246e83ce_0135_1944_b91c_5f013b2859b3
  style 246e83ce_0135_1944_b91c_5f013b2859b3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"

import { Card, CardContent } from "@/registry/new-york-v4/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/registry/new-york-v4/ui/carousel"

export function CarouselDemo() {
  return (
    <div className="hidden w-full flex-col items-center gap-4 @4xl:flex">
      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index}>
              <div className="p-1">
                <Card>
                  <CardContent className="flex aspect-square items-center justify-center p-6">
                    <span className="text-4xl font-semibold">{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      <Carousel
        className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex"
        opts={{
          align: "start",
        }}
      >
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
              <div className="p-1">
                <Card>
                  <CardContent className="flex aspect-square items-center justify-center p-6">
                    <span className="text-3xl font-semibold">{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
        <CarouselContent className="-ml-1">
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index} className="pl-1 md:basis-1/2">
              <div className="p-1">
                <Card>
                  <CardContent className="flex aspect-square items-center justify-center p-6">
                    <span className="text-2xl font-semibold">{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • card
  • carousel
  • react

Imported By

Source

Frequently Asked Questions

What does carousel-demo.tsx do?
carousel-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in carousel-demo.tsx?
carousel-demo.tsx defines 1 function(s): CarouselDemo.
What does carousel-demo.tsx depend on?
carousel-demo.tsx imports 3 module(s): card, carousel, react.
What files import carousel-demo.tsx?
carousel-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is carousel-demo.tsx in the architecture?
carousel-demo.tsx is located at apps/v4/app/(internal)/sink/components/carousel-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

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

Try Supermodel Free