ShareButton() — ui Function Reference

Architecture documentation for the ShareButton() function in share-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ ShareButton() — ui Function Reference

Dependency Diagram

graph TD
  9140ec51_988c_4328_6edc_6d11003e65d9["ShareButton()"]
  d023f415_7e1f_62eb_4467_212cc0c246f8["share-button.tsx"]
  9140ec51_988c_4328_6edc_6d11003e65d9 -->|defined in| d023f415_7e1f_62eb_4467_212cc0c246f8
  style 9140ec51_988c_4328_6edc_6d11003e65d9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/share-button.tsx lines 16–73

export function ShareButton() {
  const [params] = useDesignSystemSearchParams()
  const [hasCopied, setHasCopied] = React.useState(false)

  const shareUrl = React.useMemo(() => {
    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
    return `${origin}/create?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
  }, [
    params.base,
    params.style,
    params.baseColor,
    params.theme,
    params.iconLibrary,
    params.font,
    params.menuAccent,
    params.menuColor,
    params.radius,
    params.item,
  ])

  React.useEffect(() => {
    if (hasCopied) {
      const timer = setTimeout(() => setHasCopied(false), 2000)
      return () => clearTimeout(timer)
    }
  }, [hasCopied])

  const handleCopy = React.useCallback(() => {
    copyToClipboardWithMeta(shareUrl, {
      name: "copy_create_share_url",
      properties: {
        url: shareUrl,
      },
    })
    setHasCopied(true)
  }, [shareUrl])

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          size="sm"
          variant="outline"
          className="rounded-lg shadow-none lg:w-8 xl:w-fit"
          onClick={handleCopy}
        >
          {hasCopied ? (
            <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
          ) : (
            <HugeiconsIcon icon={Share03Icon} strokeWidth={2} />
          )}
          <span className="lg:hidden xl:block">Share</span>
        </Button>
      </TooltipTrigger>
      <TooltipContent>Copy Link</TooltipContent>
    </Tooltip>
  )
}