{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swap-column-features",
  "type": "registry:block",
  "title": "Swap column features",
  "description": "Swap column features",
  "files": [
    {
      "path": "components/usages/swapcolumnfeaturesusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport SwapColumnFeatures from \"@/registry/open-source/swap-column-features\";\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<SwapColumnFeatures />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/swapcolumnfeaturesusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport SwapColumnFeatures from \"@/registry/open-source/swap-column-features\";\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<SwapColumnFeatures />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/swap-column-features.tsx",
      "content": "\"use client\";\n\nimport React, {\n\tDispatch,\n\tSetStateAction,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport Link from \"next/link\";\n\nimport { motion, useInView } from \"motion/react\";\nimport { IconType } from \"react-icons\";\n\nconst SwapColumnFeatures = () => {\n\tconst [featureInView, setFeatureInView] = useState<FeatureType>(features[0]);\n\n\treturn (\n\t\t<section className=\"relative mx-auto max-w-7xl\">\n\t\t\t<SlidingFeatureDisplay featureInView={featureInView} />\n\n\t\t\t{/* Offsets the height of SlidingFeatureDisplay so that it renders on top of Content to start */}\n\t\t\t<div className=\"-mt-[100vh] hidden md:block\" />\n\n\t\t\t{features.map((s) => (\n\t\t\t\t<Content\n\t\t\t\t\tkey={s.id}\n\t\t\t\t\tfeatureInView={s}\n\t\t\t\t\tsetFeatureInView={setFeatureInView}\n\t\t\t\t\t{...s}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</section>\n\t);\n};\n\nconst SlidingFeatureDisplay = ({\n\tfeatureInView,\n}: {\n\tfeatureInView: FeatureType;\n}) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tjustifyContent:\n\t\t\t\t\tfeatureInView.contentPosition === \"l\"\n\t\t\t\t\t\t? \"flex-end\"\n\t\t\t\t\t\t: \"flex-start\",\n\t\t\t}}\n\t\t\tclassName=\"pointer-events-none sticky top-0 z-10 hidden h-screen w-full items-center justify-center md:flex\"\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tlayout\n\t\t\t\ttransition={{\n\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\tstiffness: 100,\n\t\t\t\t\tdamping: 25,\n\t\t\t\t}}\n\t\t\t\tclassName=\"h-fit w-3/5 rounded-xl p-8\"\n\t\t\t>\n\t\t\t\t<ExampleFeature featureInView={featureInView} />\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nexport const Content = ({\n\tsetFeatureInView,\n\tfeatureInView,\n}: {\n\tsetFeatureInView: Dispatch<SetStateAction<FeatureType>>;\n\tfeatureInView: FeatureType;\n}) => {\n\tconst ref = useRef(null);\n\tconst isInView = useInView(ref, {\n\t\tmargin: \"-150px\",\n\t});\n\n\tuseEffect(() => {\n\t\tif (isInView) {\n\t\t\tsetFeatureInView(featureInView);\n\t\t}\n\t}, [isInView]);\n\n\treturn (\n\t\t<section\n\t\t\tref={ref}\n\t\t\tclassName=\"relative z-0 flex h-fit md:h-screen\"\n\t\t\tstyle={{\n\t\t\t\tjustifyContent:\n\t\t\t\t\tfeatureInView.contentPosition === \"l\"\n\t\t\t\t\t\t? \"flex-start\"\n\t\t\t\t\t\t: \"flex-end\",\n\t\t\t}}\n\t\t>\n\t\t\t<div className=\"grid h-full w-full place-content-center px-4 py-12 md:w-2/5 md:px-8 md:py-8\">\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={{ opacity: 0, y: 25 }}\n\t\t\t\t\twhileInView={{ opacity: 1, y: 0 }}\n\t\t\t\t\ttransition={{ duration: 0.5, ease: \"easeInOut\" }}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"rounded-full bg-indigo-600 px-2 py-1.5 text-xs font-medium text-foreground\">\n\t\t\t\t\t\t{featureInView.callout}\n\t\t\t\t\t</span>\n\t\t\t\t\t<p className=\"my-3 text-5xl font-bold\">{featureInView.title}</p>\n\t\t\t\t\t<p className=\"text-slate-600 dark:text-foreground\">\n\t\t\t\t\t\t{featureInView.description}\n\t\t\t\t\t</p>\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={featureInView.href}\n\t\t\t\t\t\trel=\"noreferrer\"\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\tclassName=\"underline\"\n\t\t\t\t\t>\n\t\t\t\t\t\tVisit\n\t\t\t\t\t</Link>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tinitial={{ opacity: 0, y: 25 }}\n\t\t\t\t\twhileInView={{ opacity: 1, y: 0 }}\n\t\t\t\t\ttransition={{ duration: 0.5, ease: \"easeInOut\" }}\n\t\t\t\t\tclassName=\"mt-8 block md:hidden\"\n\t\t\t\t>\n\t\t\t\t\t<ExampleFeature featureInView={featureInView} />\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nconst ExampleFeature = ({ featureInView }: { featureInView: FeatureType }) => {\n\tif (featureInView?.isVideo) {\n\t\treturn (\n\t\t\t<video\n\t\t\t\tposter={featureInView.poster}\n\t\t\t\tclassName=\"relative md:h-fit rounded-xl bg-slate-800 shadow-xl\"\n\t\t\t\tloop\n\t\t\t\tsrc={featureInView.image}\n\t\t\t\tautoPlay\n\t\t\t\tmuted\n\t\t\t\tloop\n\t\t\t\theight={600}\n\t\t\t\twidth={1200}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<Image\n\t\t\tsrc={featureInView?.image}\n\t\t\talt=\"\"\n\t\t\theight={600}\n\t\t\twidth={1200}\n\t\t\tclassName=\"relative sm:h-[75vh] md:h-fit md:w-full rounded-xl bg-slate-800 shadow-xl\"\n\t\t/>\n\t\t// \t<div className=\"flex w-full gap-1.5 rounded-t-xl bg-slate-900 p-3\">\n\t\t// \t\t<div className=\"h-3 w-3 rounded-full bg-red-500\" />\n\t\t// \t\t<div className=\"h-3 w-3 rounded-full bg-yellow-500\" />\n\t\t// \t\t<div className=\"h-3 w-3 rounded-full bg-green-500\" />\n\t\t// \t</div>\n\t\t// \t<div className=\"p-2\">\n\t\t// \t\t<span className=\"font-mono text-sm text-slate-200\">\n\t\t// \t\t\t<span className=\"text-green-300\">~</span> Show a part of your\n\t\t// \t\t\tproduct that explains what{\" \"}\n\t\t// \t\t\t<span className=\"inline-block rounded bg-indigo-600 px-1 font-semibold\">\n\t\t// \t\t\t\t\"{featureInView.title}\"\n\t\t// \t\t\t</span>{\" \"}\n\t\t// \t\t\tmeans.\n\t\t// \t\t</span>\n\t\t// \t</div>\n\n\t\t// \t<span className=\"absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] text-9xl text-slate-700\">\n\t\t// \t\t<featureInView.Icon />\n\t\t// \t</span>\n\t\t// </img>\n\t);\n};\n\ntype FeatureType = {\n\tid: number;\n\tcallout: string;\n\ttitle: string;\n\tdescription: string;\n\tcontentPosition: \"l\" | \"r\";\n\tIcon: IconType;\n};\n\nconst features: FeatureType[] = [\n\t{\n\t\tid: 5,\n\t\thref: \"https://google.com/\",\n\t\tcallout: \"Made in a lab\",\n\t\ttitle: \"Lab made\",\n\t\tdescription: \"Lorum ipsum\",\n\t\tcontentPosition: \"r\",\n\t\timage: \"/placeholder.mp4\",\n\t\tisVideo: true,\n\t\tposter: \"itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 4,\n\t\thref: \"https://google.com/\",\n\t\tcallout: \"Technology\",\n\t\ttitle: \"Lorum Ipsum\",\n\t\tdescription: \"Test Test 123\",\n\t\tcontentPosition: \"l\",\n\t\timage: \"/placeholder.mp4\",\n\t\tisVideo: true,\n\t\tposter: \"itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 1,\n\t\tcallout: \"Construction\",\n\t\ttitle: \"Staplers\",\n\t\tdescription: \"A simple website that serves a huge purpose.\",\n\t\tcontentPosition: \"r\",\n\t\thref: \"https://google.com/\",\n\t\timage: \"/placeholder.mp4\",\n\t\tisVideo: true,\n\t\tposter: \"itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 6,\n\t\thref: \"https://google.com/\",\n\t\tcallout: \"How Cool\",\n\t\ttitle: \"Pencil Sharpeners\",\n\t\tdescription: \"They work pretty well.\",\n\t\tcontentPosition: \"l\",\n\t\timage: \"/placeholder.mp4\",\n\t\tisVideo: true,\n\t\tposter: \"itjustworks.jpg\",\n\t},\n];\n\nexport default SwapColumnFeatures;\n",
      "type": "registry:ui"
    }
  ]
}