ui Architecture Docs
Home / File/ style-switcher.tsx — ui Source File

style-switcher.tsx — ui Source File

Architecture documentation for style-switcher.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  6d60fcd6_769b_a560_a472_66e81798a814["style-switcher.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  ffcc9928_5c20_2e4d_edca_1bfec87c47c8["react-select"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> ffcc9928_5c20_2e4d_edca_1bfec87c47c8
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  8c6845ea_e0db_55db_4a65_df2f64d9e581["use-config"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> 8c6845ea_e0db_55db_4a65_df2f64d9e581
  d493776b_8734_5d8d_382d_0f77f309a72b["select"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> d493776b_8734_5d8d_382d_0f77f309a72b
  9798186b_08af_1d79_2ad7_d662300dc0ba["registry-styles"]
  6d60fcd6_769b_a560_a472_66e81798a814 --> 9798186b_08af_1d79_2ad7_d662300dc0ba
  style 6d60fcd6_769b_a560_a472_66e81798a814 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { type SelectTriggerProps } from "@radix-ui/react-select"

import { cn } from "@/lib/utils"
import { useConfig } from "@/hooks/use-config"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york/ui/select"
import { Style, styles } from "@/registry/registry-styles"

export function StyleSwitcher({ className, ...props }: SelectTriggerProps) {
  const [config, setConfig] = useConfig()

  return (
    <Select
      value={config.style}
      onValueChange={(value: Style["name"]) =>
        setConfig({
          ...config,
          style: value,
        })
      }
    >
      <SelectTrigger
        className={cn(
          "h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4",
          className
        )}
        {...props}
      >
        <span className="text-muted-foreground">Style: </span>
        <SelectValue placeholder="Select style" />
      </SelectTrigger>
      <SelectContent>
        {styles.map((style) => (
          <SelectItem key={style.name} value={style.name} className="text-xs">
            {style.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

Domain

Subdomains

Functions

Dependencies

  • react
  • react-select
  • registry-styles
  • select
  • use-config
  • utils

Source

Frequently Asked Questions

What does style-switcher.tsx do?
style-switcher.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 style-switcher.tsx?
style-switcher.tsx defines 1 function(s): StyleSwitcher.
What does style-switcher.tsx depend on?
style-switcher.tsx imports 6 module(s): react, react-select, registry-styles, select, use-config, utils.
Where is style-switcher.tsx in the architecture?
style-switcher.tsx is located at deprecated/www/components/style-switcher.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/components).

Analyze Your Own Codebase

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

Try Supermodel Free