{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/team-3.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { FiArrowUpRight } from \"react-icons/fi\";\n\nexport type Team3SocialType =\n  | \"email\"\n  | \"phone\"\n  | \"linkedin\"\n  | \"twitter\"\n  | \"website\";\n\nexport interface Team3SocialLink {\n  type: Team3SocialType;\n  href: string;\n  label?: string;\n}\n\nexport interface Team3Member {\n  id: string;\n  name: string;\n  role: string;\n  image: string;\n  socials?: Team3SocialLink[];\n}\n\nexport interface Team3Data {\n  heading: string;\n  members: Team3Member[];\n}\n\nexport interface Team3Props {\n  data?: Team3Data;\n  className?: string;\n  renderSocialLink?: (props: {\n    href: string;\n    label: string;\n    children: ReactNode;\n  }) => ReactNode;\n}\n\nconst defaultTeam3Data: Team3Data = {\n  heading: \"Our team\",\n  members: [\n    {\n      id: \"christopher-hall\",\n      name: \"Christopher Hall\",\n      role: \"Chairman\",\n      image:\n        \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=800&auto=format&fit=crop\",\n      socials: [\n        { type: \"email\", href: \"mailto:christopher@example.com\" },\n        { type: \"phone\", href: \"tel:+1234567890\" },\n        { type: \"linkedin\", href: \"#\" },\n      ],\n    },\n    {\n      id: \"gurjit-s-bedi\",\n      name: \"Gurjit S. Bedi\",\n      role: \"Managing Partner\",\n      image:\n        \"https://images.unsplash.com/photo-1618077360395-f3068be8e001?q=80&w=800&auto=format&fit=crop\",\n      socials: [\n        { type: \"email\", href: \"mailto:gurjit@example.com\" },\n        { type: \"phone\", href: \"tel:+1234567890\" },\n        { type: \"linkedin\", href: \"#\" },\n      ],\n    },\n    {\n      id: \"david-parker\",\n      name: \"David Parker\",\n      role: \"Managing Partner\",\n      image:\n        \"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=800&auto=format&fit=crop\",\n      socials: [\n        { type: \"email\", href: \"mailto:david@example.com\" },\n        { type: \"phone\", href: \"tel:+1234567890\" },\n        { type: \"linkedin\", href: \"#\" },\n      ],\n    },\n    {\n      id: \"holly-bott\",\n      name: \"Holly Bott\",\n      role: \"Partner\",\n      image:\n        \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=800&auto=format&fit=crop\",\n      socials: [\n        { type: \"email\", href: \"mailto:holly@example.com\" },\n        { type: \"phone\", href: \"tel:+1234567890\" },\n        { type: \"linkedin\", href: \"#\" },\n      ],\n    },\n  ],\n};\n\nexport default function Team3({\n  data = defaultTeam3Data,\n  className,\n}: Team3Props) {\n  return (\n    <section className={cn(\"bg-background w-full py-16\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        <div className=\"mb-6 flex items-center justify-between\">\n          <h2 className=\"text-foreground text-2xl font-medium tracking-tight sm:text-3xl\">\n            {data.heading}\n          </h2>\n          <div className=\"flex items-center gap-6\">\n            <button\n              aria-label=\"Previous\"\n              className=\"text-foreground/70 hover:text-foreground transition-colors\"\n            >\n              <ChevronLeft className=\"size-6\" strokeWidth={1.5} />\n            </button>\n            <button\n              aria-label=\"Next\"\n              className=\"text-foreground/70 hover:text-foreground transition-colors\"\n            >\n              <ChevronRight className=\"size-6\" strokeWidth={1.5} />\n            </button>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-8\">\n          {data.members.map((member) => (\n            <MemberCard key={member.id} member={member} />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction MemberCard({ member }: { member: Team3Member }) {\n  return (\n    <div className=\"group flex flex-col gap-y-2\">\n      <div className=\"bg-muted  w-full overflow-hidden sm:aspect-[4/5] aspect-square\">\n        <img\n          src={member.image}\n          alt={member.name}\n          className=\"h-full w-full object-cover grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:scale-105\"\n          loading=\"lazy\"\n        />\n      </div>\n      <div className=\"flex items-start justify-between\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"text-foreground text-lg font-medium tracking-tight\">\n            {member.name}\n          </h3>\n          <p className=\"text-muted-foreground  text-sm\">{member.role}</p>\n        </div>\n        <button\n          aria-label={`More info about ${member.name}`}\n          className=\"text-foreground/70 hover:text-foreground mt-0.5 transition-colors\"\n        >\n          <FiArrowUpRight\n            className=\"size-5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all\"\n            strokeWidth={1.5}\n          />\n        </button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/team-3.tsx"
    }
  ],
  "type": "registry:ui"
}