SkeletonDemo() — ui Function Reference

Architecture documentation for the SkeletonDemo() function in skeleton-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SkeletonDemo() — ui Function Reference

Dependency Diagram

graph TD
  649320b8_027d_118d_fc18_e1b78608508c["SkeletonDemo()"]
  a7cc7c7b_df50_f4f6_1304_968800839459["skeleton-demo.tsx"]
  649320b8_027d_118d_fc18_e1b78608508c -->|defined in| a7cc7c7b_df50_f4f6_1304_968800839459
  style 649320b8_027d_118d_fc18_e1b78608508c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/skeleton-demo.tsx lines 4–29

export function SkeletonDemo() {
  return (
    <div className="flex w-full flex-wrap items-start gap-4">
      <div className="flex items-center gap-4">
        <Skeleton className="size-10 shrink-0 rounded-full" />
        <div className="grid gap-2">
          <Skeleton className="h-4 w-[150px]" />
          <Skeleton className="h-4 w-[100px]" />
        </div>
      </div>
      <div className="flex w-full flex-wrap items-start gap-4">
        {Array.from({ length: 3 }).map((_, index) => (
          <Card key={index} className="w-full @md:w-auto @md:min-w-sm">
            <CardHeader>
              <Skeleton className="h-4 w-2/3" />
              <Skeleton className="h-4 w-1/2" />
            </CardHeader>
            <CardContent>
              <Skeleton className="aspect-square w-full" />
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}