use-colors.ts — ui Source File

Architecture documentation for use-colors.ts, a typescript file in the ui codebase. 4 imports, 0 dependents.

File typescript DocumentationAtlas SearchAPI 4 imports 1 functions

Entity Profile

DocumentationAtlas→ SearchAPI→ use-colors.ts — ui Source File

Dependency Diagram

graph LR
  64ac49ae_e8db_e100_b63f_28db1f72ecf8["use-colors.ts"]
  cba8a664_3253_9b8c_8abe_9f0e33bbc037["jotai"]
  64ac49ae_e8db_e100_b63f_28db1f72ecf8 --> cba8a664_3253_9b8c_8abe_9f0e33bbc037
  68f194ce_9060_f5f9_d266_dd66c3d544fb["utils"]
  64ac49ae_e8db_e100_b63f_28db1f72ecf8 --> 68f194ce_9060_f5f9_d266_dd66c3d544fb
  5281a958_99ee_42f0_65d8_3fb6d850517a["colors"]
  64ac49ae_e8db_e100_b63f_28db1f72ecf8 --> 5281a958_99ee_42f0_65d8_3fb6d850517a
  47758573_16e6_4808_88b2_8dba3780ae24["use-mounted"]
  64ac49ae_e8db_e100_b63f_28db1f72ecf8 --> 47758573_16e6_4808_88b2_8dba3780ae24
  style 64ac49ae_e8db_e100_b63f_28db1f72ecf8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"

import { type ColorFormat } from "@/lib/colors"
import { useMounted } from "@/hooks/use-mounted"

type Config = {
  format: ColorFormat
  lastCopied: string
}

const colorsAtom = atomWithStorage<Config>("colors", {
  format: "hsl",
  lastCopied: "",
})

export function useColors() {
  const [colors, setColors] = useAtom(colorsAtom)
  const mounted = useMounted()

  return {
    isLoading: !mounted,
    format: colors.format,
    lastCopied: colors.lastCopied,
    setFormat: (format: ColorFormat) => setColors({ ...colors, format }),
    setLastCopied: (lastCopied: string) => setColors({ ...colors, lastCopied }),
  }
}