{
  "name": "testimonial-card",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "testimonial-card.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Quote, Star } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport Image from 'next/image';\n\nexport interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  role: string;\n  content: string;\n  avatarSrc: string;\n  rating?: number;\n}\n\nexport const TestimonialCard = React.forwardRef<\n  HTMLDivElement,\n  TestimonialCardProps\n>(\n  (\n    { name, role, content, avatarSrc, rating = 5, className, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn('flex w-full max-w-sm flex-col items-center', className)}\n        {...props}\n      >\n        {/* Main Bubble */}\n        <div className='relative w-full rounded-2xl bg-white p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:bg-slate-900 dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)]'>\n          <div className='flex flex-col items-center text-center'>\n            <h3 className='text-lg font-semibold text-slate-900 dark:text-slate-100'>\n              {name}\n            </h3>\n            <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>\n              {role}\n            </p>\n\n            <div className='mt-6 flex justify-center text-blue-600 dark:text-blue-500'>\n              <Quote className='h-8 w-8 fill-current' />\n            </div>\n\n            <p className='mt-6 text-sm leading-relaxed text-slate-600 dark:text-slate-300'>\n              {content}\n            </p>\n\n            <div className='mt-6 flex items-center justify-center gap-1'>\n              {Array.from({ length: 5 }).map((_, i) => (\n                <Star\n                  key={i}\n                  className={cn(\n                    'h-4 w-4',\n                    i < rating\n                      ? 'fill-yellow-400 text-yellow-400'\n                      : 'fill-slate-200 text-slate-200 dark:fill-slate-700 dark:text-slate-700'\n                  )}\n                />\n              ))}\n            </div>\n          </div>\n\n          {/* Bubble Tail */}\n          <div className='absolute -bottom-3 left-1/2 -translate-x-1/2 transform drop-shadow-md'>\n            <div className='h-0 w-0 border-x-8 border-t-[12px] border-x-transparent border-t-white dark:border-t-slate-900' />\n          </div>\n        </div>\n\n        {/* Avatar */}\n        <div className='mt-6 h-16 w-16 overflow-hidden rounded-full border-4 border-white shadow-sm dark:border-slate-800'>\n          <Image\n            src={avatarSrc}\n            alt={name}\n            width={64}\n            height={64}\n            className='h-full w-full object-cover'\n          />\n        </div>\n      </div>\n    );\n  }\n);\nTestimonialCard.displayName = 'TestimonialCard';\n",
      "type": "registry:ui"
    }
  ]
}