{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-10",
  "title": "Team 10",
  "description": "A simple team block",
  "files": [
    {
      "path": "src/registry/blocks/radix/team-10/components/team.tsx",
      "content": "\"use client\";\n\nimport { Dribbble, Github, Twitter } from \"lucide-react\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/bases/radix/ui/carousel\";\n\nconst teamMembers = [\n  {\n    name: \"Liam Martinez\",\n    image: \"https://mockmind-api.uifaces.co/content/human/80.jpg\",\n    role: \"Chief Executive Officer\",\n  },\n  {\n    name: \"Ava Thompson\",\n    image: \"https://mockmind-api.uifaces.co/content/human/97.jpg\",\n    role: \"Chief Technology Officer\",\n  },\n  {\n    name: \"Sophia Patel\",\n    image: \"https://mockmind-api.uifaces.co/content/human/113.jpg\",\n    role: \"Head of Design\",\n  },\n  {\n    name: \"Noah Chen\",\n    image: \"https://mockmind-api.uifaces.co/content/human/104.jpg\",\n    role: \"Product Manager\",\n  },\n  {\n    name: \"Emma Garcia\",\n    image: \"https://mockmind-api.uifaces.co/content/human/116.jpg\",\n    role: \"Software Engineer\",\n  },\n  {\n    name: \"Ethan Kim\",\n    image: \"https://mockmind-api.uifaces.co/content/human/112.jpg\",\n    role: \"DevOps Engineer\",\n  },\n  {\n    name: \"Mia Johnson\",\n    image: \"https://mockmind-api.uifaces.co/content/human/111.jpg\",\n    role: \"Marketing Lead\",\n  },\n  {\n    name: \"Oliver Singh\",\n    image: \"https://mockmind-api.uifaces.co/content/human/90.jpg\",\n    role: \"Customer Success Manager\",\n  },\n];\n\nconst Team = () => {\n  const [api, setApi] = React.useState<CarouselApi | null>(null);\n  const [count, setCount] = React.useState(0);\n  const [current, setCurrent] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap() + 1);\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1);\n    });\n  }, [api]);\n\n  return (\n    <div className=\"mx-auto max-w-7xl px-6 py-20\">\n      <h2 className=\"text-balance text-center font-medium text-3xl tracking-tight sm:text-4xl md:text-[2.75rem]\">\n        Our core team\n      </h2>\n      <p className=\"mt-3 text-balance text-center text-lg text-muted-foreground tracking-[-0.01em] md:text-2xl\">\n        Passionate people building great products\n      </p>\n\n      <div className=\"mt-14\">\n        <Carousel\n          opts={{\n            align: \"start\",\n          }}\n          setApi={setApi}\n        >\n          <CarouselContent>\n            {teamMembers.map((member, index) => (\n              <CarouselItem\n                className=\"sm:basis-1/2 md:basis-1/3 lg:basis-1/4\"\n                key={index}\n              >\n                <div className=\"border bg-muted py-12\">\n                  <div className=\"mx-auto aspect-square max-w-40 select-none overflow-hidden rounded-full bg-muted\">\n                    <img alt={member.name} src={member.image} />\n                  </div>\n                  <p className=\"mt-6 text-center font-medium text-lg\">\n                    {member.name}\n                  </p>\n                  <p className=\"mt-0.5 text-center text-muted-foreground\">\n                    {member.role}\n                  </p>\n                  <div className=\"mt-5 flex items-center justify-center gap-4\">\n                    <Link href=\"#\" target=\"_blank\">\n                      <Twitter className=\"h-5 w-5 text-muted-foreground hover:text-primary\" />\n                    </Link>\n                    <Link href=\"#\" target=\"_blank\">\n                      <Github className=\"h-5 w-5 text-muted-foreground hover:text-primary\" />\n                    </Link>\n                    <Link href=\"#\" target=\"_blank\">\n                      <Dribbble className=\"h-5 w-5 text-muted-foreground hover:text-primary\" />\n                    </Link>\n                  </div>\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          <CarouselPrevious />\n          <CarouselNext />\n\n          <div className=\"mt-6 flex items-center justify-center gap-2\">\n            {Array.from({ length: count }).map((_, index) => (\n              <div\n                className={cn(\n                  \"h-2 w-2 rounded-full\",\n                  current === index + 1 ? \"bg-primary\" : \"bg-primary/20\"\n                )}\n                key={index}\n              />\n            ))}\n          </div>\n        </Carousel>\n      </div>\n    </div>\n  );\n};\n\nexport default Team;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}