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

switch-example.tsx — ui Source File

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

File tsx ComponentRegistry UIPrimitives 4 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  029eeb28_1d7e_d8d4_dbfb_f0604711c8d3["switch-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  029eeb28_1d7e_d8d4_dbfb_f0604711c8d3 --> f56be340_a522_c6f7_dec3_5906873d14c8
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  029eeb28_1d7e_d8d4_dbfb_f0604711c8d3 --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  00db19de_4bff_5fd7_3fcb_a9b94babaf3b["label"]
  029eeb28_1d7e_d8d4_dbfb_f0604711c8d3 --> 00db19de_4bff_5fd7_3fcb_a9b94babaf3b
  efabc05c_7f96_bd9b_4b64_661c4879c752["switch"]
  029eeb28_1d7e_d8d4_dbfb_f0604711c8d3 --> efabc05c_7f96_bd9b_4b64_661c4879c752
  style 029eeb28_1d7e_d8d4_dbfb_f0604711c8d3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/registry/bases/base/ui/field"
import { Label } from "@/registry/bases/base/ui/label"
import { Switch } from "@/registry/bases/base/ui/switch"

export default function SwitchExample() {
  return (
    <ExampleWrapper>
      <SwitchBasic />
      <SwitchWithDescription />
      <SwitchDisabled />
      <SwitchSizes />
    </ExampleWrapper>
  )
}

function SwitchBasic() {
  return (
    <Example title="Basic">
      <Field orientation="horizontal">
        <Switch id="switch-basic" />
        <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>
      </Field>
    </Example>
  )
}

function SwitchWithLabel() {
  return (
    <Example title="With Label">
      <div className="flex items-center gap-2">
        <Switch id="switch-bluetooth" defaultChecked />
        <Label htmlFor="switch-bluetooth">Bluetooth</Label>
      </div>
    </Example>
  )
}

function SwitchWithDescription() {
  return (
    <Example title="With Description">
      <FieldLabel htmlFor="switch-focus-mode">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Share across devices</FieldTitle>
            <FieldDescription>
              Focus is shared across devices, and turns off when you leave the
              app.
            </FieldDescription>
          </FieldContent>
          <Switch id="switch-focus-mode" />
        </Field>
      </FieldLabel>
    </Example>
  )
}

function SwitchDisabled() {
  return (
    <Example title="Disabled">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-unchecked" disabled />
          <Label htmlFor="switch-disabled-unchecked">
            Disabled (Unchecked)
          </Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-checked" defaultChecked disabled />
          <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>
        </div>
      </div>
    </Example>
  )
}

function SwitchSizes() {
  return (
    <Example title="Sizes">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-size-sm" size="sm" />
          <Label htmlFor="switch-size-sm">Small</Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-size-default" size="default" />
          <Label htmlFor="switch-size-default">Default</Label>
        </div>
      </div>
    </Example>
  )
}

Domain

Subdomains

Functions

Dependencies

  • example
  • field
  • label
  • switch

Source

Frequently Asked Questions

What does switch-example.tsx do?
switch-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 switch-example.tsx?
switch-example.tsx defines 6 function(s): SwitchBasic, SwitchDisabled, SwitchExample, SwitchSizes, SwitchWithDescription, SwitchWithLabel.
What does switch-example.tsx depend on?
switch-example.tsx imports 4 module(s): example, field, label, switch.
Where is switch-example.tsx in the architecture?
switch-example.tsx is located at apps/v4/registry/bases/base/examples/switch-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