atom.tsx — ui Source File

Architecture documentation for atom.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx Internationalization RTLLayout 3 imports 1 functions

Entity Profile

Internationalization→ RTLLayout→ atom.tsx — ui Source File

Dependency Diagram

graph LR
  36395ea0_e28e_923b_89d0_ff0619f6fe10["atom.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  36395ea0_e28e_923b_89d0_ff0619f6fe10 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  25383e8d_ca91_a50e_c3a8_5f228d02e1df["class-variance-authority"]
  36395ea0_e28e_923b_89d0_ff0619f6fe10 --> 25383e8d_ca91_a50e_c3a8_5f228d02e1df
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  36395ea0_e28e_923b_89d0_ff0619f6fe10 --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  style 36395ea0_e28e_923b_89d0_ff0619f6fe10 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const atomVariants = cva(
  "inline-flex rounded-lg border-neutral-300 dark:border-neutral-600",
  {
    variants: {
      shade: {
        "50": "bg-neutral-50 dark:bg-neutral-900",
        "100": "bg-neutral-100 dark:bg-neutral-800",
        "200": "bg-neutral-200 dark:bg-neutral-700",
        "300": "bg-neutral-300 dark:bg-neutral-600",
        "400": "bg-neutral-400 dark:bg-neutral-500",
        "500": "bg-neutral-500 dark:bg-neutral-400",
        "600": "bg-neutral-600 dark:bg-neutral-300",
        "700": "bg-neutral-700 dark:bg-neutral-200",
        "800": "bg-neutral-800 dark:bg-neutral-100",
        "900": "bg-neutral-900 dark:bg-neutral-50",
      },
    },
    defaultVariants: {
      shade: "50",
    },
  }
)

function Atom({
  className,
  shade,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof atomVariants>) {
  return (
    <div
      data-slot="button"
      className={cn(atomVariants({ shade, className }))}
      {...props}
    />
  )
}

export { Atom }