ui Architecture Docs
Home / File/ spinner-example.tsx — ui Source File

spinner-example.tsx — ui Source File

Architecture documentation for spinner-example.tsx, a tsx file in the ui codebase. 8 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 8 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  eae53476_2d94_2974_dcd8_00da635fdefc["spinner-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> f56be340_a522_c6f7_dec3_5906873d14c8
  bf2d636f_6015_e4c1_8092_f8992858a1ae["badge"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> bf2d636f_6015_e4c1_8092_f8992858a1ae
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  55bab6c5_37fc_a32d_630f_04db6fe6cb43["empty"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> 55bab6c5_37fc_a32d_630f_04db6fe6cb43
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  1fc17a46_59d6_3716_6581_5cf015f0af50["input-group"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> 1fc17a46_59d6_3716_6581_5cf015f0af50
  7f23a2ff_2863_b1ad_0393_3829e9b4d04f["spinner"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> 7f23a2ff_2863_b1ad_0393_3829e9b4d04f
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  eae53476_2d94_2974_dcd8_00da635fdefc --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style eae53476_2d94_2974_dcd8_00da635fdefc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import { Badge } from "@/registry/bases/base/ui/badge"
import { Button } from "@/registry/bases/base/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/registry/bases/base/ui/empty"
import { Field, FieldLabel } from "@/registry/bases/base/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/registry/bases/base/ui/input-group"
import { Spinner } from "@/registry/bases/base/ui/spinner"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export default function SpinnerExample() {
  return (
    <ExampleWrapper>
      <SpinnerBasic />
      <SpinnerInButtons />
      <SpinnerInBadges />
      <SpinnerInInputGroup />
      <SpinnerInEmpty />
    </ExampleWrapper>
  )
}

function SpinnerBasic() {
  return (
    <Example title="Basic">
      <div className="flex items-center gap-6">
        <Spinner />
        <Spinner className="size-6" />
      </div>
    </Example>
  )
}

function SpinnerInButtons() {
  return (
    <Example title="In Buttons">
      <div className="flex flex-wrap items-center gap-4">
        <Button>
          <Spinner data-icon="inline-start" /> Submit
        </Button>
        <Button disabled>
          <Spinner data-icon="inline-start" /> Disabled
        </Button>
        <Button variant="outline" disabled>
          <Spinner data-icon="inline-start" /> Outline
        </Button>
        <Button variant="outline" size="icon" disabled>
// ... (91 more lines)

Domain

Subdomains

Functions

Dependencies

  • badge
  • button
  • empty
  • example
  • field
  • icon-placeholder
  • input-group
  • spinner

Source

Frequently Asked Questions

What does spinner-example.tsx do?
spinner-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in spinner-example.tsx?
spinner-example.tsx defines 6 function(s): SpinnerBasic, SpinnerExample, SpinnerInBadges, SpinnerInButtons, SpinnerInEmpty, SpinnerInInputGroup.
What does spinner-example.tsx depend on?
spinner-example.tsx imports 8 module(s): badge, button, empty, example, field, icon-placeholder, input-group, spinner.
Where is spinner-example.tsx in the architecture?
spinner-example.tsx is located at apps/v4/registry/bases/base/examples/spinner-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

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

Try Supermodel Free