ui Architecture Docs
Home / File/ lock-button.tsx — ui Source File

lock-button.tsx — ui Source File

Architecture documentation for lock-button.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx DesignEngine PreviewSystem 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd["lock-button.tsx"]
  81821566_3643_c91a_1397_57950c94b526["core-free-icons"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd --> 81821566_3643_c91a_1397_57950c94b526
  614a3ef5_2f09_8b4c_c7b8_666db5a9ce32["react"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd --> 614a3ef5_2f09_8b4c_c7b8_666db5a9ce32
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  a2518e24_160d_3f8f_bb12_2206d8e84ab8["tooltip"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd --> a2518e24_160d_3f8f_bb12_2206d8e84ab8
  945c5b0b_1466_ac64_38f6_c99e3a1d57de["use-locks"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd --> 945c5b0b_1466_ac64_38f6_c99e3a1d57de
  style 768e9c76_2dc8_1e8c_f77a_8647e3aa56dd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import {
  SquareLock01Icon,
  SquareUnlock01Icon,
} from "@hugeicons/core-free-icons"
import { HugeiconsIcon } from "@hugeicons/react"

import { cn } from "@/lib/utils"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/new-york-v4/ui/tooltip"
import { useLocks, type LockableParam } from "@/app/(create)/hooks/use-locks"

export function LockButton({
  param,
  className,
}: {
  param: LockableParam
  className?: string
}) {
  const { isLocked, toggleLock } = useLocks()
  const locked = isLocked(param)

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          type="button"
          onClick={() => toggleLock(param)}
          data-locked={locked}
          className={cn(
            "flex size-4 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity group-focus-within/picker:opacity-100 group-hover/picker:opacity-100 focus:opacity-100 data-[locked=true]:opacity-100 pointer-coarse:hidden",
            className
          )}
          aria-label={locked ? "Unlock" : "Lock"}
        >
          <HugeiconsIcon
            icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
            strokeWidth={2}
            className="text-foreground size-5"
          />
        </button>
      </TooltipTrigger>
      <TooltipContent>{locked ? "Unlock" : "Lock"}</TooltipContent>
    </Tooltip>
  )
}

Domain

Subdomains

Functions

Dependencies

  • core-free-icons
  • react
  • tooltip
  • use-locks
  • utils

Source

Frequently Asked Questions

What does lock-button.tsx do?
lock-button.tsx is a source file in the ui codebase, written in tsx. It belongs to the DesignEngine domain, PreviewSystem subdomain.
What functions are defined in lock-button.tsx?
lock-button.tsx defines 1 function(s): LockButton.
What does lock-button.tsx depend on?
lock-button.tsx imports 5 module(s): core-free-icons, react, tooltip, use-locks, utils.
Where is lock-button.tsx in the architecture?
lock-button.tsx is located at apps/v4/app/(create)/components/lock-button.tsx (domain: DesignEngine, subdomain: PreviewSystem, directory: apps/v4/app/(create)/components).

Analyze Your Own Codebase

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

Try Supermodel Free