{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fold-hover-button",
  "type": "registry:block",
  "title": "Fold hover button",
  "description": "Fold hover button",
  "files": [
    {
      "path": "components/usages/foldhoverbuttonusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport FolderHoverButton from \"@/registry/open-source/fold-hover-button\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"flex justify-center items-center flex-col gap-6 w-full h-full\">\r\n\t\t\t\t<FolderHoverButton\r\n\t\t\t\t\tfolderName=\"🗽 New York, USA\"\r\n\t\t\t\t\timages={[\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t]}\r\n\t\t\t\t/>\r\n\t\t\t</div>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/foldhoverbuttonusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport FolderHoverButton from \"@/registry/open-source/fold-hover-button\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"flex justify-center items-center flex-col gap-6 w-full h-full\">\r\n\t\t\t\t<FolderHoverButton\r\n\t\t\t\t\tfolderName=\"🗽 New York, USA\"\r\n\t\t\t\t\timages={[\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t\t\"/itjustworks.jpg\",\r\n\t\t\t\t\t]}\r\n\t\t\t\t/>\r\n\t\t\t</div>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/fold-hover-button.tsx",
      "content": "import React, { useState } from \"react\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { motion, useAnimation } from \"motion/react\";\r\n\r\n// Credit:\r\n// https://eclairui.gopx.dev/components/buttons/folder-hover-button\r\n\r\ninterface FolderHoverButtonProps {\r\n\tfolderName: string;\r\n\timages: string[];\r\n}\r\n\r\nfunction FolderHoverButton({ folderName, images }: FolderHoverButtonProps) {\r\n\tconst [isHovered, setIsHovered] = useState(false);\r\n\tconst controls = useAnimation();\r\n\r\n\tconst handleHoverStart = () => {\r\n\t\tsetIsHovered(true);\r\n\t\tcontrols.start(\"open\");\r\n\t};\r\n\r\n\tconst handleHoverEnd = () => {\r\n\t\tsetIsHovered(false);\r\n\t\tcontrols.start(\"closed\");\r\n\t};\r\n\r\n\tconst maxRotation = 45;\r\n\tconst rotationStep = maxRotation / (images?.length + 1);\r\n\r\n\tconst folderVariants = {\r\n\t\tclosed: {\r\n\t\t\trotateX: 0,\r\n\t\t\ty: 0,\r\n\t\t\tz: 40,\r\n\t\t\tzIndex: 1,\r\n\t\t},\r\n\t\topen: {\r\n\t\t\trotateX: -maxRotation,\r\n\t\t\tz: 40,\r\n\t\t\tzIndex: 3,\r\n\t\t},\r\n\t};\r\n\r\n\tconst imageVariants = (index: number) => ({\r\n\t\tclosed: { rotateX: 0, y: 0, z: 0, opacity: 1 },\r\n\t\topen: {\r\n\t\t\trotateX: -maxRotation + (index + 1) * rotationStep,\r\n\t\t\tz: 30 - index * 5,\r\n\t\t\topacity: 1,\r\n\t\t\ttransition: {\r\n\t\t\t\ttype: \"spring\",\r\n\t\t\t\tstiffness: 300,\r\n\t\t\t\tdamping: 20,\r\n\t\t\t\tdelay: index * 0.1,\r\n\t\t\t},\r\n\t\t},\r\n\t});\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName=\"relative w-4/5 h-32 cursor-pointer\"\r\n\t\t\tstyle={{ perspective: \"1000px\" }}\r\n\t\t\tonMouseEnter={handleHoverStart}\r\n\t\t\tonMouseLeave={handleHoverEnd}\r\n\t\t\trole=\"button\"\r\n\t\t\ttabIndex={0}\r\n\t\t\taria-label={`Open ${folderName} folder`}\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tclassName=\"absolute inset-0 flex items-end justify-center\"\r\n\t\t\t\tstyle={{ transformStyle: \"preserve-3d\" }}\r\n\t\t\t>\r\n\t\t\t\t{images?.map((image, index) => (\r\n\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\tkey={index + \"fold-button\"}\r\n\t\t\t\t\t\tclassName=\"absolute inset-0 origin-bottom\"\r\n\t\t\t\t\t\tinitial=\"closed\"\r\n\t\t\t\t\t\tanimate={controls}\r\n\t\t\t\t\t\tvariants={imageVariants(index)}\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\ttransformStyle: \"preserve-3d\",\r\n\t\t\t\t\t\t\tzIndex: images?.length - index + (isHovered ? 2 : 1),\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\tsrc={image}\r\n\t\t\t\t\t\t\talt={`Image ${index + 1} in ${folderName} folder`}\r\n\t\t\t\t\t\t\tlayout=\"fill\"\r\n\t\t\t\t\t\t\tobjectFit=\"cover\"\r\n\t\t\t\t\t\t\tclassName=\"rounded-lg\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</motion.div>\r\n\t\t\t\t))}\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tclassName=\"absolute inset-0 bg-background border-2 border-white/5 rounded-lg origin-bottom\"\r\n\t\t\t\t\tinitial=\"closed\"\r\n\t\t\t\t\tanimate={controls}\r\n\t\t\t\t\tvariants={folderVariants}\r\n\t\t\t\t\ttransition={{ type: \"spring\", stiffness: 300, damping: 20 }}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\ttransformStyle: \"preserve-3d\",\r\n\t\t\t\t\t\tzIndex: images?.length + 1,\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div className=\"absolute inset-0 flex items-center justify-center\">\r\n\t\t\t\t\t\t<span className=\"text-2xl font-caveat text-foreground\">\r\n\t\t\t\t\t\t\t{folderName}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</motion.div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default FolderHoverButton;\r\n",
      "type": "registry:ui"
    }
  ]
}