LockButton() — ui Function Reference

Architecture documentation for the LockButton() function in lock-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ LockButton() — ui Function Reference

Dependency Diagram

graph TD
  487e1b08_2122_9892_0fbd_779bb7ef1ca4["LockButton()"]
  768e9c76_2dc8_1e8c_f77a_8647e3aa56dd["lock-button.tsx"]
  487e1b08_2122_9892_0fbd_779bb7ef1ca4 -->|defined in| 768e9c76_2dc8_1e8c_f77a_8647e3aa56dd
  style 487e1b08_2122_9892_0fbd_779bb7ef1ca4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/lock-button.tsx lines 17–50

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>
  )
}