{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-card",
  "type": "registry:block",
  "title": "Flip card",
  "description": "Flip card",
  "files": [
    {
      "path": "components/usages/flipcardusage.tsx",
      "content": "import { FlipCard } from \"@/registry/open-source/flip-card\";\r\n\r\nexport default function FlipCardBasic() {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<FlipCard\r\n\t\t\t\tfront={<Front />}\r\n\t\t\t\tback={<Back />}\r\n\t\t\t\tpanelClassName=\"\"\r\n\t\t\t\tflipDirection=\"horizontal\"\r\n\t\t\t\tflipRotation=\"forward\"\r\n\t\t\t/>\r\n\t\t\t<FlipCard\r\n\t\t\t\tfront={<Front />}\r\n\t\t\t\tback={<Back />}\r\n\t\t\t\tclassName=\"w-[350px]\"\r\n\t\t\t\tpanelClassName=\"rounded-2xl bg-background\"\r\n\t\t\t\tflipDirection=\"vertical\"\r\n\t\t\t\tflipRotation=\"reverse\"\r\n\t\t\t/>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nexport const Front = () => {\r\n\treturn (\r\n\t\t<div className=\"w-full h-full relative flex items-center justify-center\">\r\n\t\t\t<img\r\n\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\talt=\"front image\"\r\n\t\t\t\tclassName=\"w-full h-full absolute inset-0\"\r\n\t\t\t/>\r\n\t\t\t<h3 className=\"text-secondary text-5xl font-semibold uppercase font-mono relative\">\r\n\t\t\t\tBLOOM\r\n\t\t\t</h3>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport const Back = () => {\r\n\treturn (\r\n\t\t<div className=\"w-full h-full relative flex flex-col items-center justify-center gap-3 p-4 bg-background dark:bg-background text-secondary dark:text-secondary\">\r\n\t\t\t<h3 className=\"text-xl font-bold uppercase tracking-widest\">\r\n\t\t\t\tExplore More\r\n\t\t\t</h3>\r\n\t\t\t<p className=\"text-sm text-center text-secondary dark:text-secondary\">\r\n\t\t\t\tDive into our exclusive collection of hand-crafted visuals.\r\n\t\t\t</p>\r\n\t\t\t<button className=\"mt-2 px-4 py-1.5 text-sm font-medium bg-background dark:bg-background text-secondary dark:text-secondary rounded-full hover:opacity-90 transition cursor-pointer\">\r\n\t\t\t\tBrowse Now\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/flipcardusage.tsx",
      "content": "import { FlipCard } from \"@/registry/open-source/flip-card\";\r\n\r\nexport default function FlipCardBasic() {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<FlipCard\r\n\t\t\t\tfront={<Front />}\r\n\t\t\t\tback={<Back />}\r\n\t\t\t\tpanelClassName=\"\"\r\n\t\t\t\tflipDirection=\"horizontal\"\r\n\t\t\t\tflipRotation=\"forward\"\r\n\t\t\t/>\r\n\t\t\t<FlipCard\r\n\t\t\t\tfront={<Front />}\r\n\t\t\t\tback={<Back />}\r\n\t\t\t\tclassName=\"w-[350px]\"\r\n\t\t\t\tpanelClassName=\"rounded-2xl bg-background\"\r\n\t\t\t\tflipDirection=\"vertical\"\r\n\t\t\t\tflipRotation=\"reverse\"\r\n\t\t\t/>\r\n\t\t</>\r\n\t);\r\n}\r\n\r\nexport const Front = () => {\r\n\treturn (\r\n\t\t<div className=\"w-full h-full relative flex items-center justify-center\">\r\n\t\t\t<img\r\n\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\talt=\"front image\"\r\n\t\t\t\tclassName=\"w-full h-full absolute inset-0\"\r\n\t\t\t/>\r\n\t\t\t<h3 className=\"text-secondary text-5xl font-semibold uppercase font-mono relative\">\r\n\t\t\t\tBLOOM\r\n\t\t\t</h3>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport const Back = () => {\r\n\treturn (\r\n\t\t<div className=\"w-full h-full relative flex flex-col items-center justify-center gap-3 p-4 bg-background dark:bg-background text-secondary dark:text-secondary\">\r\n\t\t\t<h3 className=\"text-xl font-bold uppercase tracking-widest\">\r\n\t\t\t\tExplore More\r\n\t\t\t</h3>\r\n\t\t\t<p className=\"text-sm text-center text-secondary dark:text-secondary\">\r\n\t\t\t\tDive into our exclusive collection of hand-crafted visuals.\r\n\t\t\t</p>\r\n\t\t\t<button className=\"mt-2 px-4 py-1.5 text-sm font-medium bg-background dark:bg-background text-secondary dark:text-secondary rounded-full hover:opacity-90 transition cursor-pointer\">\r\n\t\t\t\tBrowse Now\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/flip-card.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\n\n// Credit:\n// https://berlix.vercel.app/docs/flip-card\n\ninterface FlipCardProps {\n\tfront: React.ReactNode;\n\tback: React.ReactNode;\n\tduration?: number;\n\tflipDirection?: \"horizontal\" | \"vertical\";\n\tflipRotation?: \"forward\" | \"reverse\";\n\tclassName?: string;\n\tpanelClassName?: string;\n}\n\nexport const FlipCard = ({\n\tfront,\n\tback,\n\tduration = 0.3,\n\tclassName,\n\tpanelClassName,\n\tflipDirection = \"horizontal\",\n\tflipRotation = \"forward\",\n}: FlipCardProps) => {\n\tconst rotate = useMotionValue(0);\n\tconst rotateSpring = useSpring(rotate, {\n\t\tstiffness: (1 / duration) * 50,\n\t\tdamping: 30,\n\t});\n\n\tconst handleMouseEnter = () => {\n\t\tconst isVertical = flipDirection === \"vertical\";\n\t\tconst isForward = flipRotation === \"forward\";\n\n\t\tconst angle = isVertical\n\t\t\t? isForward\n\t\t\t\t? -180\n\t\t\t\t: 180\n\t\t\t: isForward\n\t\t\t\t? 180\n\t\t\t\t: -180;\n\n\t\trotate.set(angle);\n\t};\n\tconst handleMouseLeave = () => rotate.set(0);\n\n\tconst rotateStyle =\n\t\tflipDirection === \"horizontal\"\n\t\t\t? { rotateY: rotateSpring }\n\t\t\t: { rotateX: rotateSpring };\n\n\tconst backfaceTransform =\n\t\tflipDirection === \"horizontal\" ? \"rotateY(180deg)\" : \"rotateX(180deg)\";\n\n\treturn (\n\t\t<motion.div\n\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\tstyle={{\n\t\t\t\tperspective: 1000,\n\t\t\t}}\n\t\t\tclassName={cn(\"relative w-56 h-72\", className)}\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tstyle={{\n\t\t\t\t\t...rotateStyle,\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\ttransformStyle: \"preserve-3d\",\n\t\t\t\t\tposition: \"relative\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute w-full h-full top-0 left-0 rounded-xl overflow-hidden shadow-md bg-background backface-hidden\",\n\t\t\t\t\t\tpanelClassName\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{front}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ transform: backfaceTransform }}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute w-full h-full top-0 left-0  rounded-xl overflow-hidden shadow-md bg-background backface-hidden\",\n\t\t\t\t\t\tpanelClassName\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{back}\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}