{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-card",
  "type": "registry:ui",
  "title": "Profile Card",
  "description": "A glassmorphic profile card with two variants — full-bleed image overlay and split half layout. Includes follow button, favorite toggle, and verified badge.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/profile-card.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\nimport { BadgeCheck, UserRound, Images, Heart, Plus } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── Types ── */\n\ninterface ProfileCardProps {\n  variant: \"full\" | \"half\";\n  image: string;\n  name: string;\n  bio: string;\n  followers: number;\n  posts: number;\n  verified?: boolean;\n  onFollow?: () => void;\n  onFavorite?: (favorited: boolean) => void;\n  className?: string;\n}\n\n/* ── Constants ── */\n\nconst shell = [\n  \"group w-full rounded-[40px] p-2.5\",\n  \"bg-white dark:bg-neutral-900\",\n  \"shadow-[0_2px_4px_-1px_rgba(0,0,0,0.06),0_12px_48px_-8px_rgba(0,0,0,0.12)]\",\n  \"dark:shadow-[0_2px_4px_-1px_rgba(0,0,0,0.3),0_12px_48px_-8px_rgba(0,0,0,0.5)]\",\n];\n\nconst BLUR_MASK =\n  \"linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 10%, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.14) 30%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.9) 70%, black 80%)\";\n\n/* ── Component ── */\n\nexport function ProfileCard({\n  variant,\n  image,\n  name,\n  bio,\n  followers,\n  posts,\n  verified = true,\n  onFollow,\n  onFavorite,\n  className,\n}: ProfileCardProps) {\n  const [favorited, setFavorited] = useState(false);\n\n  const toggleFavorite = () => {\n    const next = !favorited;\n    setFavorited(next);\n    onFavorite?.(next);\n  };\n\n  /* ── Full variant ── */\n  if (variant === \"full\") {\n    return (\n      <div className={cn(...shell, className)}>\n        <div className=\"relative aspect-[3/4.5] overflow-hidden rounded-[28px]\">\n          <Image\n            src={image}\n            alt={name}\n            fill\n            className=\"object-cover object-top transition-transform duration-500 ease-out group-hover:scale-[1.03]\"\n          />\n\n          {/* Water-glass blur */}\n          <div\n            className=\"absolute inset-x-0 bottom-0 h-4/5\"\n            style={{\n              backdropFilter: \"blur(64px) saturate(1.8)\",\n              WebkitBackdropFilter: \"blur(64px) saturate(1.8)\",\n              maskImage: BLUR_MASK,\n              WebkitMaskImage: BLUR_MASK,\n            }}\n          />\n\n          <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent\" />\n\n          {/* Heart */}\n          <button\n            onClick={toggleFavorite}\n            className=\"\n              absolute top-4 right-4 z-10\n              flex size-9 items-center justify-center\n              rounded-full bg-white/15 backdrop-blur-md\n              border border-white/20\n              transition-all duration-150 ease-out\n              hover:bg-white/25 hover:scale-[0.96]\n              active:scale-[0.92]\n              cursor-pointer\n            \"\n          >\n            <Heart\n              size={15}\n              strokeWidth={1.8}\n              fill={favorited ? \"currentColor\" : \"none\"}\n              className={cn(\n                \"transition-colors duration-150\",\n                favorited ? \"text-rose-400\" : \"text-white/70\",\n              )}\n            />\n          </button>\n\n          {/* Content */}\n          <div className=\"absolute inset-x-0 bottom-0 z-10 flex flex-col p-5\">\n            <div className=\"flex items-center gap-1\">\n              <h3 className=\"text-2xl font-bold text-white tracking-tight leading-none\">\n                {name}\n              </h3>\n              {verified && (\n                <BadgeCheck\n                  size={20}\n                  strokeWidth={1.5}\n                  className=\"text-[#1d9bf0] fill-[#1d9bf0] stroke-white\"\n                />\n              )}\n            </div>\n\n            <p className=\"text-xs text-white/55 leading-relaxed mt-1 mb-3\">\n              {bio}\n            </p>\n\n            <div className=\"flex items-center gap-3 mb-3\">\n              <span className=\"inline-flex items-center gap-1 text-[13px] text-white/50\">\n                <UserRound size={13} strokeWidth={1.8} />\n                <span className=\"font-semibold text-white\">{followers}</span>\n              </span>\n              <span className=\"inline-flex items-center gap-1 text-[13px] text-white/50\">\n                <Images size={13} strokeWidth={1.8} />\n                <span className=\"font-semibold text-white\">{posts}</span>\n              </span>\n            </div>\n\n            <button\n              onClick={onFollow}\n              className=\"\n                w-full h-[42px] rounded-full\n                inline-flex items-center justify-center gap-1.5\n                bg-white/90 backdrop-blur-sm\n                text-[13px] font-semibold text-neutral-900\n                transition-all duration-150 ease-out\n                hover:bg-white hover:scale-[0.98]\n                active:scale-[0.96]\n                cursor-pointer\n              \"\n            >\n              Follow\n              <Plus size={15} strokeWidth={2.5} />\n            </button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  /* ── Half variant ── */\n  return (\n    <div className={cn(...shell, className)}>\n      <div className=\"flex flex-col aspect-[3/4.5]\">\n        {/* Image — takes ~67% */}\n        <div className=\"relative flex-[2] shrink-0 overflow-hidden rounded-[28px]\">\n          <Image\n            src={image}\n            alt={name}\n            fill\n            className=\"object-cover object-top transition-transform duration-500 ease-out group-hover:scale-[1.03]\"\n          />\n        </div>\n\n        {/* Content */}\n        <div className=\"flex flex-1 flex-col justify-between px-3 pt-3 pb-2\">\n          <div>\n            <div className=\"flex items-center gap-1\">\n              <h3 className=\"text-[22px] font-bold text-neutral-900 dark:text-white tracking-tight leading-none\">\n                {name}\n              </h3>\n              {verified && (\n                <BadgeCheck\n                  size={18}\n                  strokeWidth={1.5}\n                  className=\"text-[#1d9bf0] fill-[#1d9bf0] stroke-white dark:stroke-neutral-900\"\n                />\n              )}\n            </div>\n\n            <p className=\"text-xs text-neutral-400 dark:text-neutral-500 leading-relaxed mt-1\">\n              {bio}\n            </p>\n          </div>\n\n          {/* Stats + Follow */}\n          <div className=\"flex items-center\">\n            <div className=\"flex items-center gap-3 flex-1\">\n              <span className=\"inline-flex items-center gap-1 text-[13px] text-neutral-400 dark:text-neutral-500\">\n                <UserRound size={13} strokeWidth={1.8} />\n                <span className=\"font-semibold text-neutral-900 dark:text-white\">\n                  {followers}\n                </span>\n              </span>\n              <span className=\"inline-flex items-center gap-1 text-[13px] text-neutral-400 dark:text-neutral-500\">\n                <Images size={13} strokeWidth={1.8} />\n                <span className=\"font-semibold text-neutral-900 dark:text-white\">\n                  {posts}\n                </span>\n              </span>\n            </div>\n\n            <button\n              onClick={onFollow}\n              className=\"\n                h-[38px] px-4 rounded-full\n                inline-flex items-center gap-1.5\n                bg-neutral-50 dark:bg-neutral-800\n                border border-neutral-200 dark:border-neutral-700\n                text-xs font-semibold text-neutral-900 dark:text-white\n                transition-all duration-150 ease-out\n                hover:scale-[0.97]\n                active:scale-[0.95]\n                cursor-pointer\n              \"\n            >\n              Follow\n              <Plus size={14} strokeWidth={2.5} />\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/profile-card.tsx"
    }
  ]
}