{"version":1,"id":"liquid-metal-profile-button","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/liquid-metal-profile-button.tsx","content":"\"use client\";\n\nimport { LiquidMetal } from \"@paper-design/shaders-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n  AvatarFallback,\n  AvatarImage,\n  LiquidMetalAvatar,\n} from \"@/blocks/gfa/liquid-metal-avatar\";\nimport { cn } from \"@/lib/utils\";\n\nexport type LiquidMetalProfileButtonProps = Omit<\n  ComponentProps<\"a\">,\n  \"children\"\n> & {\n  src?: string;\n  alt?: string;\n  username?: string;\n  fallback?: string;\n  avatarSize?: \"sm\" | \"md\" | \"lg\";\n  /** Gallery embed: no navigation. */\n  preview?: boolean;\n};\n\nexport function LiquidMetalProfileButton({\n  href = \"https://x.com/gokhanf4\",\n  src = \"/avatars/gokhan.png\",\n  alt = \"Gökhan\",\n  username = \"@gokhanf4\",\n  fallback = \"GF\",\n  avatarSize = \"md\",\n  preview = false,\n  className,\n  target = \"_blank\",\n  rel = \"noreferrer noopener\",\n  ...props\n}: LiquidMetalProfileButtonProps) {\n  const shellClass = cn(\n    \"group relative inline-flex rounded-2xl outline-none transition active:scale-[0.98]\",\n    \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    className,\n  );\n\n  const inner = (\n    <>\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden rounded-2xl\">\n        <LiquidMetal\n          className=\"absolute inset-0 size-full\"\n          shape=\"none\"\n          speed={0.28}\n          repetition={4}\n          softness={0.62}\n          shiftRed={0.3}\n          shiftBlue={0.3}\n          distortion={0}\n          contour={0}\n          angle={45}\n          scale={8}\n          offsetX={0.1}\n          offsetY={-0.1}\n          colorBack=\"#c8c8ca\"\n          colorTint=\"#ffffff\"\n        />\n      </div>\n      <span\n        className={cn(\n          \"relative z-[1] m-[2px] inline-flex items-center gap-2.5 rounded-[14px] bg-card py-1.5 pr-4 pl-1.5 text-foreground\",\n          \"transition group-hover:bg-card/95\",\n        )}\n      >\n        <LiquidMetalAvatar\n          size={avatarSize}\n          speed={0.28}\n          softness={0.62}\n          className=\"size-11 shrink-0\"\n        >\n          <AvatarImage src={src} alt={alt} />\n          <AvatarFallback>{fallback}</AvatarFallback>\n        </LiquidMetalAvatar>\n        <span className=\"truncate text-sm font-semibold tracking-tight\">\n          {username}\n        </span>\n      </span>\n    </>\n  );\n\n  if (preview) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={username}\n        data-slot=\"liquid-metal-profile-button\"\n        className={shellClass}\n      >\n        {inner}\n      </button>\n    );\n  }\n\n  return (\n    <a\n      href={href}\n      target={target}\n      rel={rel}\n      aria-label={username}\n      data-slot=\"liquid-metal-profile-button\"\n      className={shellClass}\n      {...props}\n    >\n      {inner}\n    </a>\n  );\n}\n\nexport { LiquidMetalProfileButton as LiquidMetalProfileButtonBlock };\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}