{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-rotation",
  "type": "registry:block",
  "title": "Card rotation",
  "description": "Card rotation",
  "files": [
    {
      "path": "components/usages/cardrotationusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { CardRotation } from \"@/registry/open-source/card-rotation\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CardRotation />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cardrotationusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { CardRotation } from \"@/registry/open-source/card-rotation\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CardRotation />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/card-rotation.tsx",
      "content": "import React, { useEffect, useRef, useState } from \"react\";\n\nimport { motion } from \"motion/react\";\n\nconst cards = [\n\t{\n\t\tid: 1,\n\t\ticon: <div>test</div>,\n\t},\n\t{\n\t\tid: 2,\n\t\ticon: <div>test</div>,\n\t},\n\t{\n\t\tid: 3,\n\t\ticon: <div>test</div>,\n\t},\n\t{\n\t\tid: 4,\n\t\ticon: <div>test</div>,\n\t},\n\t{\n\t\tid: 5,\n\t\ticon: <div>test</div>,\n\t},\n];\n\nconst cardVariants = {\n\tselected: {\n\t\trotateY: 180,\n\t\tscale: 1.1,\n\t\ttransition: { duration: 0.35 },\n\t\tzIndex: 10,\n\t\tboxShadow:\n\t\t\t\"rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px\",\n\t},\n\tnotSelected: (i: any) => ({\n\t\trotateY: i * 15,\n\t\tscale: 1 - Math.abs(i * 0.15),\n\t\tx: i ? i * 50 : 0,\n\t\topacity: 1 - Math.abs(i * 0.15),\n\t\tzIndex: 10 - Math.abs(i),\n\t\tboxShadow:\n\t\t\t\"rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px\",\n\t\ttransition: { duration: 0.35 },\n\t}),\n};\n\nexport const CardRotation = () => {\n\tconst [selectedCard, setSelectedCard] = useState(null);\n\tconst [{ startX, startScrollLeft, isDragging }, setDragStart] = useState({\n\t\tstartX: undefined as any,\n\t\tstartScrollLeft: undefined as any,\n\t\tisDragging: false as any,\n\t});\n\tconst containerRef = useRef<any>();\n\tconst cardRefs = useRef<any>(new Array());\n\tuseEffect(() => {\n\t\tconst { scrollWidth, clientWidth } = containerRef.current;\n\t\tconst halfScroll = (scrollWidth - clientWidth) / 2;\n\t\tcontainerRef.current.scrollLeft = halfScroll;\n\t}, [containerRef.current]);\n\tconst handleMouseDown = (e: any) => {\n\t\tsetDragStart({\n\t\t\tstartX: e.pageX - containerRef.current.offsetLeft,\n\t\t\tstartScrollLeft: containerRef.current.scrollLeft,\n\t\t\tisDragging: true,\n\t\t});\n\t};\n\tconst handleMouseMove = (e: any) => {\n\t\tif (!isDragging || selectedCard) return;\n\t\tconst x = e.pageX - containerRef.current.offsetLeft;\n\t\tconst walk = x - startX;\n\t\tcontainerRef.current.scrollLeft = startScrollLeft - walk;\n\t};\n\tconst selectCard = (card: any) => {\n\t\tsetSelectedCard(selectedCard ? null : card);\n\n\t\tif (card && !selectedCard) {\n\t\t\tcardRefs.current[card - 1].scrollIntoView({\n\t\t\t\tbehavior: \"smooth\",\n\t\t\t\tblock: \"nearest\",\n\t\t\t\tinline: \"center\",\n\t\t\t});\n\t\t}\n\t};\n\tconst handleCardMouseUp = (e: any, card: any) => {\n\t\tif (isDragging) {\n\t\t\tconst x = e.pageX - containerRef.current.offsetLeft;\n\t\t\tconst walk = x - startX;\n\t\t\tif (Math.abs(walk) < 5) selectCard(card);\n\t\t} else selectCard(card);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"h-full w-full flex items-center  max-w-2xl   relative\"\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonMouseUp={() =>\n\t\t\t\tsetDragStart((prev) => ({ ...prev, isDragging: false }))\n\t\t\t}\n\t\t\tonMouseMove={handleMouseMove}\n\t\t>\n\t\t\t<div className=\"absolute left-0  w-32 bg-slate-900 mask-[linear-gradient(to_right,white,transparent)] h-full z-30\" />\n\t\t\t<div className=\"absolute right-0  w-32 bg-slate-900 mask-[linear-gradient(to_left,white,transparent)] h-full z-30\" />\n\t\t\t<div\n\t\t\t\tclassName=\"max-w-full overflow-x-scroll w-full h-full no-visible-scrollbar relative\"\n\t\t\t\tstyle={{\n\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\tperspective: \"150px\",\n\t\t\t\t}}\n\t\t\t\tref={containerRef}\n\t\t\t>\n\t\t\t\t{cards.map((card, i) => (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"card relative inline-block items-center justify-center h-40 w-40 bg-slate-800 m-10 rounded-md cursor-pointer\"\n\t\t\t\t\t\tkey={card.id}\n\t\t\t\t\t\tref={(el) => cardRefs.current.push(el)}\n\t\t\t\t\t\tonMouseUp={(e) => handleCardMouseUp(e, card.id)}\n\t\t\t\t\t\tvariants={cardVariants}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tselectedCard === card.id ? \"selected\" : \"notSelected\"\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustom={selectedCard ? selectedCard - card.id : 0}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"h-full w-full flex items-center justify-center\">\n\t\t\t\t\t\t\t{card.icon}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    }
  ]
}