ui Architecture Docs
Home / File/ color.tsx — ui Source File

color.tsx — ui Source File

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

File tsx Internationalization Dictionary 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  ba2a504b_9fbb_4be1_e962_4274fda3a506["color.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> e750d152_1191_1793_7244_99c7f9c595f4
  5281a958_99ee_42f0_65d8_3fb6d850517a["colors"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> 5281a958_99ee_42f0_65d8_3fb6d850517a
  a9903b11_2f1d_8437_2ec7_acd8ba077fa8["events"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> a9903b11_2f1d_8437_2ec7_acd8ba077fa8
  a5ebc15d_0ba5_30f8_7c37_f009f0a1b271["use-colors"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> a5ebc15d_0ba5_30f8_7c37_f009f0a1b271
  16fc7cf6_3e3a_9efc_f45b_63496f779853["use-copy-to-clipboard"]
  ba2a504b_9fbb_4be1_e962_4274fda3a506 --> 16fc7cf6_3e3a_9efc_f45b_63496f779853
  style ba2a504b_9fbb_4be1_e962_4274fda3a506 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Check, Clipboard } from "lucide-react"
import { toast } from "sonner"

import { type Color } from "@/lib/colors"
import { trackEvent } from "@/lib/events"
import { useColors } from "@/hooks/use-colors"
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"

export function Color({ color }: { color: Color }) {
  const { format, setLastCopied, lastCopied } = useColors()
  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 0 })

  return (
    <button
      key={color.hex}
      className="group relative flex aspect-[3/1] w-full flex-1 cursor-pointer flex-col gap-2 text-(--text) sm:aspect-[2/3] sm:h-auto sm:w-auto [&>svg]:absolute [&>svg]:top-4 [&>svg]:right-4 [&>svg]:z-10 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:opacity-0 [&>svg]:transition-opacity"
      data-last-copied={lastCopied === color[format]}
      style={
        {
          "--bg": `${color.oklch}`,
          "--text": color.foreground,
        } as React.CSSProperties
      }
      onClick={() => {
        copyToClipboard(color[format])
        trackEvent({
          name: "copy_color",
          properties: {
            color: color.id,
            value: color[format],
            format,
          },
        })
        setLastCopied(color[format])
        toast.success(`Copied ${color[format]} to clipboard.`)
      }}
    >
      {isCopied ? (
        <Check className="group-hover:opacity-100 group-data-[last-copied=true]:opacity-100" />
      ) : (
        <Clipboard className="group-hover:opacity-100" />
      )}
      <div className="border-ghost after:border-input w-full flex-1 rounded-md bg-(--bg) after:rounded-lg md:rounded-lg" />
      <div className="flex w-full flex-col items-center justify-center gap-1">
        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary font-mono text-xs tabular-nums transition-colors sm:hidden xl:flex">
          {color.className}
        </span>
        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary hidden font-mono text-xs tabular-nums transition-colors sm:flex xl:hidden">
          {color.scale}
        </span>
      </div>
    </button>
  )
}

Domain

Subdomains

Functions

Dependencies

  • colors
  • events
  • lucide-react
  • sonner
  • use-colors
  • use-copy-to-clipboard

Source

Frequently Asked Questions

What does color.tsx do?
color.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, Dictionary subdomain.
What functions are defined in color.tsx?
color.tsx defines 1 function(s): Color.
What does color.tsx depend on?
color.tsx imports 6 module(s): colors, events, lucide-react, sonner, use-colors, use-copy-to-clipboard.
Where is color.tsx in the architecture?
color.tsx is located at apps/v4/components/color.tsx (domain: Internationalization, subdomain: Dictionary, directory: apps/v4/components).

Analyze Your Own Codebase

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

Try Supermodel Free