Get to know your iSad.

); } const DummyContent = () => { return ( <> {[...new Array(3).fill(1)].map((_, index) => { return (

The first rule of Apple club is that you boast about Apple club. {" "} Keep a journal, quickly jot down a grocery list, and take amazing class notes. Want to convert those notes to text? No problem. Langotiya jeetu ka mara hua yaar is ready to capture every thought.

); })} ); }; const data = [ { category: "Artificial Intelligence", title: "You can do more with AI.", src: "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Productivity", title: "Enhance your productivity.", src: "https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Product", title: "Launching the new Apple Vision Pro.", src: "https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Product", title: "Maps for your iPhone 15 Pro Max.", src: "https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "iOS", title: "Photography just got better.", src: "https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Hiring", title: "Hiring for a Staff Software Engineer", src: "https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, ]; `,__rawStringJsx__:`"use client"; import Image from "next/image"; import React from "react"; import { Carousel, Card } from "@/components/ui/apple-cards-carousel"; export function AppleCardsCarouselDemo() { const cards = data.map((card, index) => ( )); return ( (

Get to know your iSad.

) ); } const DummyContent = () => { return (<> {[...new Array(3).fill(1)].map((_, index) => { return ( (

) ); })} ); }; const data = [ { category: "Artificial Intelligence", title: "You can do more with AI.", src: "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Productivity", title: "Enhance your productivity.", src: "https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Product", title: "Launching the new Apple Vision Pro.", src: "https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Product", title: "Maps for your iPhone 15 Pro Max.", src: "https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "iOS", title: "Photography just got better.", src: "https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, { category: "Hiring", title: "Hiring for a Staff Software Engineer", src: "https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", content: , }, ]; `,__src__:"src/registry/default/example/apple-cards-carousel-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"Image"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"react"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"Carousel"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"Card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"@/components/ui/apple-cards-carousel"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"AppleCardsCarouselDemo"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"cards"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ));"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"w-full h-full py-20"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"h2"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"max-w-7xl pl-4 mx-auto text-xl md:text-5xl font-bold text-neutral-800 dark:text-neutral-200 font-sans"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" Get to know your iSad."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Carousel"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"items"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"cards"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"[..."}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"new"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"Array"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"3"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:")."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"fill"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:")]."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"_"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"dummy-content"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"bg-[#F5F5F7] dark:bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"text-neutral-600 dark:text-neutral-400 text-base md:text-2xl font-sans max-w-3xl mx-auto"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"font-bold text-neutral-700 dark:text-neutral-200"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" The first rule of Apple club is that you boast about Apple club."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'" "'}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" Keep a journal, quickly jot down a grocery list, and take amazing"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" class notes. Want to convert those notes to text? No problem."})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" Langotiya jeetu ka mara hua yaar is ready to capture every"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" thought."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/macbook.png"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Macbook mockup from Aceternity UI"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"500"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"500"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"md:w-1/2 md:h-1/2 h-full w-full mx-auto object-contain"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" })"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Artificial Intelligence"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"You can do more with AI."'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1593508512255-86ab42a8e620?q=80&w=3556&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Productivity"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Enhance your productivity."'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1531554694128-c4c6665f59c2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Product"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Launching the new Apple Vision Pro."'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1713869791518-a770879e60dc?q=80&w=2333&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Product"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Maps for your iPhone 15 Pro Max."'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1599202860130-f600f4948364?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"iOS"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Photography just got better."'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1602081957921-9137a5d6eaee?q=80&w=2793&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Hiring"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Hiring for a Staff Software Engineer"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"https://images.unsplash.com/photo-1511984804822-e16ba72f5848?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"DummyContent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(a,{defaultValue:"manual",children:[(0,l.jsxs)(c,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(d,{value:"cli",children:(0,l.jsxs)(B,{children:[(0,l.jsx)(o,{children:"Run the following command"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add apple-cards-carousel `,__npmCommand__:`npx aceternity-ui@latest add apple-cards-carousel `,__yarnCommand__:`npx aceternity-ui@latest add apple-cards-carousel `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add apple-cards-carousel `,__bunCommand__:`bunx --bun aceternity-ui@latest add apple-cards-carousel `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"add"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"apple-cards-carousel"})]})})})}),(0,l.jsxs)(o,{children:["Add ",(0,l.jsx)(n.code,{children:"useOutsideClick"})," hook"]}),(0,l.jsxs)(n.div,{"data-rehype-pretty-code-fragment":"",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"hooks/use-outside-click.ts"}),(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import React, { useEffect } from "react"; export const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__rawStringJsx__:`import { useEffect } from "react"; export const useOutsideClick = ( ref, callback ) => { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"react"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"RefObject"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Function"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"any"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"contains"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"target"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:")) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})})]})})]})]})}),(0,l.jsx)(d,{value:"manual",children:(0,l.jsxs)(B,{children:[(0,l.jsx)(o,{children:"Install dependencies"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"i"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"clsx"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,l.jsx)(o,{children:"Add util file"}),(0,l.jsxs)(n.div,{"data-rehype-pretty-code-fragment":"",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"clsx"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"inputs"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,l.jsxs)(o,{children:["Add ",(0,l.jsx)(n.code,{children:"useOutsideClick"})," hook"]}),(0,l.jsxs)(n.div,{"data-rehype-pretty-code-fragment":"",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"hooks/use-outside-click.ts"}),(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import React, { useEffect } from "react"; export const useOutsideClick = ( ref: React.RefObject, callback: Function ) => { useEffect(() => { const listener = (event: any) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,__rawStringJsx__:`import { useEffect } from "react"; export const useOutsideClick = ( ref, callback ) => { useEffect(() => { const listener = (event) => { if (!ref.current || ref.current.contains(event.target)) { return; } callback(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, callback]); }; `,children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"react"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"RefObject"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Function"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"any"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"||"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"contains"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"target"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:")) {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"mousedown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"touchstart"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"listener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"callback"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})})]})})]}),(0,l.jsx)(o,{children:"Copy the source code"}),(0,l.jsx)(n.p,{children:(0,l.jsx)(n.code,{children:"components/ui/apple-cards-carousel.tsx"})}),(0,l.jsx)(p,{name:"apple-cards-carousel",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useEffect, useRef, useState, createContext, useContext, } from "react"; import { IconArrowNarrowLeft, IconArrowNarrowRight, IconX, } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import Image, { ImageProps } from "next/image"; import { useOutsideClick } from "@/hooks/use-outside-click"; interface CarouselProps { items: JSX.Element[]; initialScroll?: number; } type Card = { src: string; title: string; category: string; content: React.ReactNode; }; export const CarouselContext = createContext<{ onCardClose: (index: number) => void; currentIndex: number; }>({ onCardClose: () => {}, currentIndex: 0, }); export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => { const carouselRef = React.useRef(null); const [canScrollLeft, setCanScrollLeft] = React.useState(false); const [canScrollRight, setCanScrollRight] = React.useState(true); const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { if (carouselRef.current) { carouselRef.current.scrollLeft = initialScroll; checkScrollability(); } }, [initialScroll]); const checkScrollability = () => { if (carouselRef.current) { const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current; setCanScrollLeft(scrollLeft > 0); setCanScrollRight(scrollLeft < scrollWidth - clientWidth); } }; const scrollLeft = () => { if (carouselRef.current) { carouselRef.current.scrollBy({ left: -300, behavior: "smooth" }); } }; const scrollRight = () => { if (carouselRef.current) { carouselRef.current.scrollBy({ left: 300, behavior: "smooth" }); } }; const handleCardClose = (index: number) => { if (carouselRef.current) { const cardWidth = isMobile() ? 230 : 384; // (md:w-96) const gap = isMobile() ? 4 : 8; const scrollPosition = (cardWidth + gap) * (index + 1); carouselRef.current.scrollTo({ left: scrollPosition, behavior: "smooth", }); setCurrentIndex(index); } }; const isMobile = () => { return window && window.innerWidth < 768; }; return (

{items.map((item, index) => ( {item} ))}

); }; export const Card = ({ card, index, layout = false, }: { card: Card; index: number; layout?: boolean; }) => { const [open, setOpen] = useState(false); const containerRef = useRef(null); const { onCardClose, currentIndex } = useContext(CarouselContext); useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === "Escape") { handleClose(); } } if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [open]); useOutsideClick(containerRef, () => handleClose()); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); onCardClose(index); }; return ( <> {open && (

{card.category} {card.title}

{card.content}

)}

{card.category} {card.title}

); }; export const BlurImage = ({ height, width, src, className, alt, ...rest }: ImageProps) => { const [isLoading, setLoading] = useState(true); return ( setLoading(false)} src={src} width={width} height={height} loading="lazy" decoding="async" blurDataURL={typeof src === "string" ? src : undefined} alt={alt ? alt : "Background of a beautiful view"} {...rest} /> ); }; `,__rawStringJsx__:`"use client";; import React, { useEffect, useRef, useState, createContext, useContext, } from "react"; import { IconArrowNarrowLeft, IconArrowNarrowRight, IconX, } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; import Image from "next/image"; import { useOutsideClick } from "@/hooks/use-outside-click"; export const CarouselContext = createContext({ onCardClose: () => {}, currentIndex: 0, }); export const Carousel = ({ items, initialScroll = 0 }) => { const carouselRef = React.useRef(null); const [canScrollLeft, setCanScrollLeft] = React.useState(false); const [canScrollRight, setCanScrollRight] = React.useState(true); const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { if (carouselRef.current) { carouselRef.current.scrollLeft = initialScroll; checkScrollability(); } }, [initialScroll]); const checkScrollability = () => { if (carouselRef.current) { const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current; setCanScrollLeft(scrollLeft > 0); setCanScrollRight(scrollLeft < scrollWidth - clientWidth); } }; const scrollLeft = () => { if (carouselRef.current) { carouselRef.current.scrollBy({ left: -300, behavior: "smooth" }); } }; const scrollRight = () => { if (carouselRef.current) { carouselRef.current.scrollBy({ left: 300, behavior: "smooth" }); } }; const handleCardClose = (index) => { if (carouselRef.current) { const cardWidth = isMobile() ? 230 : 384; // (md:w-96) const gap = isMobile() ? 4 : 8; const scrollPosition = (cardWidth + gap) * (index + 1); carouselRef.current.scrollTo({ left: scrollPosition, behavior: "smooth", }); setCurrentIndex(index); } }; const isMobile = () => { return window && window.innerWidth < 768; }; return ( (

{items.map((item, index) => ( {item} ))}

) ); }; export const Card = ({ card, index, layout = false }) => { const [open, setOpen] = useState(false); const containerRef = useRef(null); const { onCardClose, currentIndex } = useContext(CarouselContext); useEffect(() => { function onKeyDown(event) { if (event.key === "Escape") { handleClose(); } } if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [open]); useOutsideClick(containerRef, () => handleClose()); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); onCardClose(index); }; return (<> {open && (

{card.category} {card.title}

{card.content}

)}

{card.category} {card.title}

); }; export const BlurImage = ({ height, width, src, className, alt, ...rest }) => { const [isLoading, setLoading] = useState(true); return ( ( setLoading(false)} src={src} width={width} height={height} loading="lazy" decoding="async" blurDataURL={typeof src === "string" ? src : undefined} alt={alt ? alt : "Background of a beautiful view"} {...rest} />) ); }; `,__src__:"src/registry/default/ui/apple-cards-carousel.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"createContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"react"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"IconArrowNarrowLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"IconArrowNarrowRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"IconX"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"} "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"@tabler/icons-react"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"AnimatePresence"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"motion"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"Image"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"ImageProps"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"useOutsideClick"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"@/hooks/use-outside-click"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"CarouselProps"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"items"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"JSX"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Element"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"[];"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"initialScroll"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"CarouselContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"createContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"<{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"onCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"void"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"currentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}>({"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"onCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {},"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"currentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"});"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"Carousel"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"items"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"initialScroll"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"CarouselProps"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"canScrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"setCanScrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"canScrollRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"setCanScrollRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"React"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"currentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"setCurrentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"initialScroll"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"checkScrollability"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"initialScroll"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"checkScrollability"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"scrollWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"clientWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setCanScrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setCanScrollRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"clientWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"scrollBy"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"left"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"300"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"behavior"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"smooth"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"scrollRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"scrollBy"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"left"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"300"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"behavior"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"smooth"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"handleCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"cardWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"isMobile"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"230"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"384"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"; "}),(0,l.jsx)(n.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// (md:w-96)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"gap"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"isMobile"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"4"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"8"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"scrollPosition"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"cardWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"gap"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"*"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"scrollTo"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"left"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollPosition"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"behavior"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"smooth"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setCurrentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"isMobile"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"window"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"window"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"innerWidth"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"768"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"CarouselContext.Provider"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"value"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"onCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"handleCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"currentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"relative w-full"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"flex w-full overflow-x-scroll overscroll-x-auto py-10 md:py-20 scroll-smooth [scrollbar-width:none]"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"carouselRef"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onScroll"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"checkScrollability"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"absolute right-0 z-[1000] h-auto w-[5%] overflow-hidden bg-gradient-to-l"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"flex flex-row justify-start gap-4 pl-4"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"max-w-7xl mx-auto"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// remove max-w-4xl if you want the carousel to span the full width of its container"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"items"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"y"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"20"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"y"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"transition"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"duration"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"delay"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0.2"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"*"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"ease"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"easeOut"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"once"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"card"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"last:pr-[5%] md:last:pr-[33%] rounded-3xl"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"item"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"flex justify-end gap-2 mr-10"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"relative z-40 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center disabled:opacity-50"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"disabled"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"canScrollLeft"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"IconArrowNarrowLeft"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"h-6 w-6 text-gray-500"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"relative z-40 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center disabled:opacity-50"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"scrollRight"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"disabled"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"!"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"canScrollRight"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"IconArrowNarrowRight"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"h-6 w-6 text-gray-500"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"Card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"open"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"setOpen"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"onCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"currentIndex"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"CarouselContext"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"function"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"onKeyDown"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"KeyboardEvent"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"event"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"key"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Escape"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"handleClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"if"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"open"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"body"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"overflow"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"hidden"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"else"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"document"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"body"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"overflow"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"auto"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"window"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"window"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"keydown"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"onKeyDown"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }, ["}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"open"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useOutsideClick"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"handleClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"());"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"handleOpen"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"handleClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setOpen"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"onCardClose"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"index"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <>"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"AnimatePresence"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"open"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"fixed inset-0 h-screen z-50 overflow-auto"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"bg-black/80 backdrop-blur-lg h-full w-full fixed inset-0"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"exit"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"opacity"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`card-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"max-w-5xl mx-auto bg-white dark:bg-neutral-900 h-fit z-[60] my-10 p-4 md:p-10 rounded-3xl font-sans relative"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"sticky top-4 h-8 w-8 right-0 ml-auto bg-black dark:bg-white rounded-full flex items-center justify-center"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"handleClose"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"IconX"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"h-6 w-6 text-neutral-100 dark:text-neutral-900"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`category-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"text-base font-medium text-black dark:text-white"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`title-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"text-2xl md:text-5xl font-semibold text-neutral-700 mt-4 dark:text-white"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"py-10"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"content"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`card-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"handleOpen"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"rounded-3xl bg-gray-100 dark:bg-neutral-900 h-80 w-56 md:h-[40rem] md:w-96 overflow-hidden flex flex-col items-start justify-start relative z-10"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"absolute h-full top-0 inset-x-0 bg-gradient-to-b from-black/50 via-transparent to-transparent z-30 pointer-events-none"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"relative z-40 p-8"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`category-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"text-white text-sm md:text-base font-medium font-sans text-left"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"category"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"layout"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`title-"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"text-white text-xl md:text-3xl font-semibold max-w-xs text-left [text-wrap:balance] font-sans mt-2"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"BlurImage"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"card"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"title"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"fill"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"object-cover absolute z-10 inset-0"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"BlurImage"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"height"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"width"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"rest"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"}: "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"ImageProps"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"isLoading"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"return"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"transition duration-300"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"isLoading"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"blur-sm"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"blur-0"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"className"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onLoad"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"() "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#61AFEF"},children:"setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"width"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"height"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"lazy"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"decoding"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"async"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"blurDataURL"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{typeof"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"==="}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"string"'}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"src"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66"},children:"undefined"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#56B6C2"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"alt"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#98C379"},children:'"Background of a beautiful view"'}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" "}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E06C75"},children:"rest"}),(0,l.jsx)(n.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"examples",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,l.jsxs)(n.h4,{id:"standard",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#standard",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Standard"]}),` `,(0,l.jsx)(s,{name:"apple-cards-carousel-demo",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%] overflow-hidden relative",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import Image from "next/image"; import React from "react"; import { Carousel, Card } from "@/components/ui/apple-cards-carousel"; export function AppleCardsCarouselDemo() { const cards = data.map((card, index) => ( )); return (

Get to know your iSad.

); } const DummyContent = () => { return ( <> {[...new Array(3).fill(1)].map((_, index) => { return (

Get to know your iSad.

) ); } const DummyContent = () => { return (<> {[...new Array(3).fill(1)].map((_, index) => { return ( (

Get to know your iSad.

); } const DummyContent = () => { return ( <> {[...new Array(3).fill(1)].map((_, index) => { return (

Get to know your iSad.

) ); } const DummyContent = () => { return (<> {[...new Array(3).fill(1)].map((_, index) => { return ( (