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

switch-demo.tsx — ui Source File

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

File tsx DocumentationAtlas ContentSourcing 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  16e41fc8_2963_c335_f27b_81063e87322c["switch-demo.tsx"]
  d752035b_6ed3_c6ef_e27c_eef51af9ec8d["label"]
  16e41fc8_2963_c335_f27b_81063e87322c --> d752035b_6ed3_c6ef_e27c_eef51af9ec8d
  38ebb3c2_9638_6c9d_8ced_a16ec1ff06c9["switch"]
  16e41fc8_2963_c335_f27b_81063e87322c --> 38ebb3c2_9638_6c9d_8ced_a16ec1ff06c9
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 16e41fc8_2963_c335_f27b_81063e87322c
  style 16e41fc8_2963_c335_f27b_81063e87322c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Label } from "@/registry/new-york-v4/ui/label"
import { Switch } from "@/registry/new-york-v4/ui/switch"

export function SwitchDemo() {
  return (
    <div className="flex flex-col gap-6">
      {/* Sizes. */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Switch id="switch-demo-sm" size="sm" />
          <Label htmlFor="switch-demo-sm">Small</Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-demo-default" />
          <Label htmlFor="switch-demo-default">Default</Label>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-demo-airplane-mode" />
        <Label htmlFor="switch-demo-airplane-mode">Airplane Mode</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch
          id="switch-demo-bluetooth"
          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
          defaultChecked
        />
        <Label htmlFor="switch-demo-bluetooth">Bluetooth</Label>
      </div>
      <Label className="flex items-center gap-6 rounded-lg border p-4 has-[[data-state=checked]]:border-blue-600">
        <div className="flex flex-col gap-1">
          <div className="font-medium">Share across devices</div>
          <div className="text-muted-foreground text-sm font-normal">
            Focus is shared across devices, and turns off when you leave the
            app.
          </div>
        </div>
        <Switch
          id="switch-demo-focus-mode"
          className="data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600"
        />
      </Label>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • label
  • switch

Imported By

Source

Frequently Asked Questions

What does switch-demo.tsx do?
switch-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in switch-demo.tsx?
switch-demo.tsx defines 1 function(s): SwitchDemo.
What does switch-demo.tsx depend on?
switch-demo.tsx imports 2 module(s): label, switch.
What files import switch-demo.tsx?
switch-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is switch-demo.tsx in the architecture?
switch-demo.tsx is located at apps/v4/app/(internal)/sink/components/switch-demo.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, 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