); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { ArrowRight } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"interface"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" IGetStartedButtonProps"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:" text"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" string"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?:"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" string"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" GetStartedButton"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:" text"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Get started"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" IGetStartedButtonProps"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"div"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"min-h-12 w-48"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "group flex h-12 w-40 items-center justify-center gap-3 rounded-lg bg-amber-100 p-2 font-bold transition-colors duration-100 ease-in-out hover:bg-orange-600"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "text-orange-600 transition-colors duration-100 ease-in-out group-hover:text-amber-100"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {text}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "relative flex h-7 w-7 items-center justify-center overflow-hidden rounded-full transition-transform duration-100"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "bg-orange-600 group-hover:bg-amber-100"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"div"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute left-0 flex h-7 w-14 -translate-x-1/2 items-center justify-center transition-all duration-200 ease-in-out group-hover:translate-x-0"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"ArrowRight"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" size"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"16"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "size-7 transform p-1 text-orange-600 opacity-0 group-hover:opacity-100"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"ArrowRight"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" size"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"16"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "size-7 transform p-1 text-amber-100 opacity-100 transition-transform duration-300 ease-in-out group-hover:opacity-0"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,a.jsxs)(c,{copyId:"algolia-white-button",children:[(0,a.jsx)(bg,{}),(0,a.jsx)(t.figure,{"data-rehype-pretty-code-figure":"",children:(0,a.jsx)(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__copyId__:"algolia-white-button",__rawString__:`export default function AlgoliaWhiteButton() { return ( ); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AlgoliaWhiteButton"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"inline-flex h-12 cursor-pointer touch-manipulation items-center justify-center overflow-hidden whitespace-nowrap rounded border-0 bg-[#FCFCFD] px-4 font-mono leading-none text-slate-800 no-underline shadow-[rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] transition-all duration-150 ease-in-out hover:-translate-y-0.5 hover:shadow-[rgba(45,35,66,0.4)_0_4px_8px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] focus:shadow-[#D6D6E7_0_0_0_1.5px_inset,rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] active:translate-y-0.5 active:shadow-[#D6D6E7_0_3px_7px_inset]"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" role"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Aloglia White"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,a.jsxs)(c,{copyId:"algolia-blue-button",children:[(0,a.jsx)(Hg,{}),(0,a.jsx)(t.figure,{"data-rehype-pretty-code-figure":"",children:(0,a.jsx)(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__copyId__:"algolia-blue-button",__rawString__:`export default function AlgoliaBlueButton() { return ( ); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AlgoliaBlueButton"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"relative box-border inline-flex h-12 cursor-pointer touch-manipulation items-center justify-center overflow-hidden whitespace-nowrap rounded-md border-0 bg-gradient-to-r from-sky-500 to-blue-600 px-4 font-mono leading-none text-white no-underline shadow-[rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,rgba(58,65,111,0.5)_0_-3px_0_inset] transition-all duration-150 ease-in-out hover:-translate-y-0.5 hover:shadow-[rgba(45,35,66,0.4)_0_4px_8px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#3c4fe0_0_-3px_0_inset] focus:shadow-[#3c4fe0_0_0_0_1.5px_inset,rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#3c4fe0_0_-3px_0_inset] active:translate-y-0.5 active:shadow-[#3c4fe0_0_3px_7px_inset]"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" role"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Aloglia Blue"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,a.jsxs)(c,{copyId:"duolingo",children:[(0,a.jsx)(Ig,{}),(0,a.jsx)(t.figure,{"data-rehype-pretty-code-figure":"",children:(0,a.jsx)(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__copyId__:"duolingo",__rawString__:`export default function Duolingo() { return ( ); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" Duolingo"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"box-border inline-block h-11 transform-gpu cursor-pointer touch-manipulation whitespace-nowrap rounded-lg border-b-4 border-solid border-transparent bg-sky-600 px-4 py-3 text-center text-sm font-bold uppercase leading-5 tracking-wider text-white outline-none transition-all duration-200 hover:brightness-110 active:border-b-0 active:border-t-4 active:bg-none disabled:cursor-auto"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" role"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"button"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Duolingo"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"span"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute inset-0 -z-10 rounded-lg border-b-4 border-solid border-transparent bg-sky-500"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),(0,a.jsx)(c,{copyId:"ai-button",lazy:!0,children:(0,a.jsx)(t.figure,{"data-rehype-pretty-code-figure":"",children:(0,a.jsx)(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__copyId__:"ai-button",__rawString__:`import { useEffect, useMemo, useState } from "react"; import { Sparkle } from "lucide-react"; import { loadFull } from "tsparticles"; import type { ISourceOptions } from "@tsparticles/engine"; import Particles, { initParticlesEngine } from "@tsparticles/react"; const options: ISourceOptions = { key: "star", name: "Star", particles: { number: { value: 20, density: { enable: false, }, }, color: { value: ["#7c3aed", "#bae6fd", "#a78bfa", "#93c5fd", "#0284c7", "#fafafa", "#38bdf8"], }, shape: { type: "star", options: { star: { sides: 4, }, }, }, opacity: { value: 0.8, }, size: { value: { min: 1, max: 4 }, }, rotate: { value: { min: 0, max: 360, }, enable: true, direction: "clockwise", animation: { enable: true, speed: 10, sync: false, }, }, links: { enable: false, }, reduceDuplicates: true, move: { enable: true, center: { x: 120, y: 45, }, }, }, interactivity: { events: {}, }, smooth: true, fpsLimit: 120, background: { color: "transparent", size: "cover", }, fullScreen: { enable: false, }, detectRetina: true, absorbers: [ { enable: true, opacity: 0, size: { value: 1, density: 1, limit: { radius: 5, mass: 5, }, }, position: { x: 110, y: 45, }, }, ], emitters: [ { autoPlay: true, fill: true, life: { wait: true, }, rate: { quantity: 5, delay: 0.5, }, position: { x: 110, y: 45, }, }, ], }; export default function AiButton() { const [particleState, setParticlesReady] = useState<"loaded" | "ready">(); const [isHovering, setIsHovering] = useState(false); useEffect(() => { initParticlesEngine(async (engine) => { await loadFull(engine); }).then(() => { setParticlesReady("loaded"); }); }, []); const modifiedOptions = useMemo(() => { options.autoPlay = isHovering; return options; }, [isHovering]); return ( ); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { useEffect, useMemo, useState } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { Sparkle } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { loadFull } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "tsparticles"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" type"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { ISourceOptions } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "@tsparticles/engine"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Particles, { initParticlesEngine } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "@tsparticles/react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"const"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" options"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" ISourceOptions"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" key: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"star"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Star"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" particles: {"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" number: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"20"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" density: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" color: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: ["}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#7c3aed"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#bae6fd"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#a78bfa"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#93c5fd"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#0284c7"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#fafafa"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"#38bdf8"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"],"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" shape: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" type: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"star"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" options: {"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" star: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" sides: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"4"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" opacity: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" size: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: { min: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", max: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"4"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" rotate: {"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" min: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" max: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"360"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" direction: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"clockwise"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animation: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" speed: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"10"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" sync: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" links: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" reduceDuplicates: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" move: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" center: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" x: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"120"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" y: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"45"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" interactivity: {"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" events: {},"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" smooth: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" fpsLimit: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"120"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" background: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" color: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"transparent"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" size: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"cover"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" fullScreen: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" detectRetina: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" absorbers: ["})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" enable: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" opacity: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" size: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" value: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" density: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" limit: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" radius: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"5"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" mass: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"5"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" position: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" x: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"110"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" y: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"45"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ],"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" emitters: ["})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" autoPlay: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" fill: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" life: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" wait: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" rate: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" quantity: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"5"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" delay: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.5"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" position: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" x: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"110"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" y: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"45"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ],"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AiButton"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"particleState"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setParticlesReady"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"] "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" useState"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"<"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"loaded"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" |"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "ready"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">();"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"isHovering"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setIsHovering"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"] "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" useState"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" initParticlesEngine"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"async"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"engine"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:") "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" await"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" loadFull"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(engine);"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" })."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"then"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setParticlesReady"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"loaded"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }, []);"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" modifiedOptions"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" options.autoPlay "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" isHovering;"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" options;"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }, [isHovering]);"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"group relative my-8 rounded-full bg-gradient-to-r from-blue-300/30 via-blue-500/30 via-40% to-purple-500/30 p-1 text-white transition-transform hover:scale-110 active:scale-105"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" onMouseEnter"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setIsHovering"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"true"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" onMouseLeave"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setIsHovering"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"div"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"relative flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-blue-300 via-blue-500 via-40% to-purple-500 px-4 py-2 text-white"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Sparkle"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"size-6 -translate-y-0.5 animate-sparkle fill-white"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Sparkle"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" style"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animationDelay: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"1s"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute bottom-2.5 left-3.5 z-20 size-2 rotate-12 animate-sparkle fill-white"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Sparkle"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" style"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animationDelay: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"1.5s"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animationDuration: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"2.5s"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute left-5 top-2.5 size-1 -rotate-12 animate-sparkle fill-white"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Sparkle"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" style"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animationDelay: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"0.5s"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animationDuration: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"2.5s"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute left-3 top-3 size-1.5 animate-sparkle fill-white"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"span"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"font-semibold"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">Generate thumbnails"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"!!"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"particleState "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"&&"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Particles"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" id"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"whatever"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:"`pointer-events-none absolute -bottom-4 -left-4 -right-4 -top-4 z-0 opacity-0 transition-opacity ${"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"particleState"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ==="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "ready"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ?"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "group-hover:opacity-100"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" :"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' ""}`'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" particlesLoaded"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"async"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" () "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setParticlesReady"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"ready"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" options"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{modifiedOptions}"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,a.jsx)(c,{copyId:"status-button",lazy:!0,children:(0,a.jsx)(t.figure,{"data-rehype-pretty-code-figure":"",children:(0,a.jsx)(t.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__copyId__:"status-button",__rawString__:`import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { CheckCircle2, CircleDashed } from "lucide-react"; import { cn } from "@/lib/utils"; const wait = async (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function StatusButton() { const [status, setStatus] = useState<"loading" | "Add to cart" | "Added to cart">(); const isEnabled = !status || status === "Add to cart"; const changeStatus = async () => { if (!isEnabled) { return; } setStatus("loading"); await wait(1500); setStatus("Added to cart"); await wait(1500); setStatus("Add to cart"); }; return ( ); } `,children:(0,a.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { AnimatePresence, motion } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "framer-motion"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { CheckCircle2, CircleDashed } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"const"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" wait"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" async"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"ms"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" number"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:") "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" new"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" Promise"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"resolve"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:") "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setTimeout"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(resolve, ms));"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" StatusButton"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"status"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"] "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" useState"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"<"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"loading"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" |"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Add to cart"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" |"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Added to cart"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">();"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" isEnabled"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" !"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"status "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"||"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" status "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"==="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Add to cart"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" changeStatus"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" async"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" () "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=>"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" if"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"!"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"isEnabled) {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"loading"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" await"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" wait"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1500"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Added to cart"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" await"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" wait"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1500"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Add to cart"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" onClick"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{changeStatus}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" disabled"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"!"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"isEnabled}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"group relative h-10 min-w-40 overflow-hidden rounded-md bg-teal-500 px-6 text-sm font-semibold text-white transition-colors duration-300 hover:bg-teal-600"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"AnimatePresence"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" mode"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"wait"'}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" initial"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"false"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}>"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"motion.span"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#6A737D"},children:" // Remount the component so that the animation can be restarted"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" key"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{status}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" initial"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ opacity: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"15"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" animate"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ opacity: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" exit"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ opacity: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", y: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"15"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" transition"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.075"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"flex items-center justify-center gap-1"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {status "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"==="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Added to cart"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" &&"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"motion.span"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"h-fit w-fit"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" initial"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" animate"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" transition"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ delay: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.075"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", type: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"spring"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"CheckCircle2"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"h-4 w-4 fill-white stroke-teal-500 group-hover:stroke-teal-600"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {status "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"=="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "loading"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ?"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"CircleDashed"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"h-4 w-4 animate-spin"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" status "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"??"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Add to cart"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})})]})}function WV(l={}){let{wrapper:t}=l.components||{};return t?(0,a.jsx)(t,Object.assign({},l,{children:(0,a.jsx)(gv,l)})):gv(l)}var XV=WV;function vv(l,t){throw new Error("Expected "+(t?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return Ev(KV);})(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.390.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) */ ;return Component;

Buttons overview