Delete {!isActive && ( )} {" "} {!isActive && ( )}

); }; export default Delete; `,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:"#9ECBFF"},children:'"use client"'}),(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:" React, { 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:" { motion, AnimatePresence } "}),(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:" { Check, X } "}),(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:" { 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:" Delete"}),(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:" {"})]}),` `,(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:"isActive"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setIsActive"}),(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:"true"}),(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:" handleDeleteClick"}),(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:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setIsActive"}),(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.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:" handleCancelClick"}),(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:" {"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" setIsActive"}),(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.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:"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:'"center text-white h-full w-full"'}),(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:"svg"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" version"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"1.1"'})]}),` `,(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"'})]}),` `,(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:"defs"}),(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:"filter"}),(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:'"goo"'}),(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:"feGaussianBlur"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" in"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"SourceGraphic"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" stdDeviation"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"10"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" result"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"blur"'})]}),` `,(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:"feColorMatrix"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" in"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"blur"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(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:'"matrix"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" values"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" result"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"goo"'})]}),` `,(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:"feComposite"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" in"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"SourceGraphic"'}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" in2"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"goo"'}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" operator"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"atop"'}),(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,{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:"#9ECBFF"},children:'"flex items-center justify-center gap-3 relative"'})]}),` `,(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:" filter: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"url(#goo)"'}),(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:"motion.button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" whileHover"}),(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.9"}),(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,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "h-10 rounded-md px-10 transition-all z-10 flex center absolute bg-primary text-primary-foreground duration-500"'})}),` `,(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:" onClick"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{handleDeleteClick}"})]}),` `,(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:" Delete"})}),` `,(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:"#79B8FF"},children:"AnimatePresence"}),(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:"isActive "}),(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.button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" whileHover"}),(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.9"}),(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:" initial"}),(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:" x: "}),(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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.7"}),(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:" borderRadius: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"50%"'}),(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:" animate"}),(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:" x: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"130"}),(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:" scale: "}),(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:" }}"})}),` `,(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:"{{"})]}),` `,(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:"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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.7"}),(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:" transition"}),(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:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.4"}),(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:" ease: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"easeInOut"'}),(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:"#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,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "h-10 w-10 rounded-full bg-primary text-muted-foreground center"'})}),` `,(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:" onClick"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{handleCancelClick}"})]}),` `,(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:"X"}),(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:'"w-4 h-4"'}),(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.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},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:"#E1E4E8"},children:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"AnimatePresence"}),(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:"isActive "}),(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.button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" whileHover"}),(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.9"}),(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:" initial"}),(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:" x: "}),(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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.7"}),(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:" borderRadius: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"50%"'}),(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:" animate"}),(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:" x: "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"130"}),(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:" scale: "}),(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:" }}"})}),` `,(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:"{{"})]}),` `,(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:"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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.7"}),(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:" transition"}),(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:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.4"}),(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:" ease: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"easeInOut"'}),(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:"#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,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "h-10 w-10 rounded-full bg-primary text-muted-foreground center"'})}),` `,(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:" onClick"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{handleCancelClick}"})]}),` `,(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:"Check"}),(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:'"w-4 h-4"'}),(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.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.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:"#E1E4E8"},children:" Delete;"})]})]})})})]}),(0,a.jsxs)(r,{copyId:"github",children:[(0,a.jsx)(aS,{}),(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__:"github",__rawString__:`"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; const Github = () => { const [isHovered, setIsHovered] = useState(false); return (

); }; export default Github; `,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:"#9ECBFF"},children:'"use client"'}),(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:" React, { 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:" { 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.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:" Github"}),(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:" {"})]}),` `,(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:"isHovered"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setIsHovered"}),(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:"#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:'"h-full w-full center"'}),(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:'"py-2 px-4 rounded flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90"'})]}),` `,(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:" setIsHovered"}),(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:" setIsHovered"}),(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:"span"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">Learn More"})]}),` `,(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.svg"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" width"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"15"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" height"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"15"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" viewBox"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"0 0 24 24"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" fill"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"none"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(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:"motion.path"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" d"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"M5 12H19"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" stroke"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"2"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeLinecap"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeLinejoin"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(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:", x: "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(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:"#B392F0"},children:" animate"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ opacity: isHovered "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" 1"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" :"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" 0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", x: isHovered "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" 0"}),(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:"#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:"#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.2"}),(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:"motion.path"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" d"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"M12 5L19 12L12 19"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" stroke"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"2"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeLinecap"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" strokeLinejoin"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"round"'})]}),` `,(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:"{{ x: "}),(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:"{{ x: isHovered "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" 0"}),(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:"#79B8FF"},children:"7"}),(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.2"}),(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.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:"#E1E4E8"},children:" Github;"})]})]})})})]}),(0,a.jsxs)(r,{copyId:"sparkles",children:[(0,a.jsx)(oS,{}),(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__:"sparkles",__rawString__:`"use client"; import { animate, stagger, useAnimate } from "framer-motion"; import { Star } from "lucide-react"; import { useEffect, useState } from "react"; type AnimationSequence = Parameters[0]; const Sparkles = ({ text = "Click me" }: { text: string }) => { const [starCount, setStarCount] = useState(0); useEffect(() => { setTimeout(() => { setStarCount(randomNumberGenerator(2, 50)); }, 1000); }, [starCount]); const randomNumberGenerator = (min: number, max: number) => { return Math.random() * (max - min) + min; }; const [scope, animate] = useAnimate(); const letters = text.split(""); const handleBtnClick = () => { const sparkles = Array.from({ length: starCount }); const sparkleAnimation: AnimationSequence = sparkles.map((_, index) => [ \`.stars-\${index}\`, { x: randomNumberGenerator(-100, 100), y: randomNumberGenerator(-100, 100), scale: randomNumberGenerator(1, 0.5), opacity: 1, }, { duration: 0.4, at: "<", }, ]); const sparklesFadeOut: AnimationSequence = sparkles.map((_, index) => [ \`.stars-\${index}\`, { opacity: 0, scale: 0, }, { duration: 0.3, at: "<", }, ]); const sparkleReset: AnimationSequence = sparkles.map((_, index) => [ \`.stars-\${index}\`, { x: 0, y: 0, }, { duration: 0.00000000001, at: "<", }, ]); animate([ ...sparkleReset, [".letter", { y: -32 }, { duration: 0.2, delay: stagger(0.05) }], ["button", { scale: 0.8 }, { duration: 0.1, at: "<" }], ["button", { scale: 1 }, { duration: 0.1 }], ...sparkleAnimation, [".letter", { y: 0 }, { duration: 0.00000000001 }], ...sparklesFadeOut, ]); }; return (

); }; export default Sparkles; `,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:"#9ECBFF"},children:'"use client"'}),(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:" { animate, stagger, useAnimate } "}),(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:" { Star } "}),(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:" { useEffect, 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.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:"type"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AnimationSequence"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" Parameters"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"<"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"typeof"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animate>["}),(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.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:" Sparkles"}),(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:"#FFAB70"},children:"text"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Click me"'}),(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.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.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:" const"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"starCount"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setStarCount"}),(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:"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:" 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:" setTimeout"}),(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:" setStarCount"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"randomNumberGenerator"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"2"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"50"}),(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:"1000"}),(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:" }, [starCount]);"})}),` `,(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:" randomNumberGenerator"}),(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:"#FFAB70"},children:"min"}),(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:"#FFAB70"},children:"max"}),(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:"#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:" Math."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"random"}),(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:" (max "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" min) "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"+"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" min;"})]}),` `,(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:"#F97583"},children:" const"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"scope"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"animate"}),(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:" useAnimate"}),(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:" letters"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" text."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"split"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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:"#B392F0"},children:" handleBtnClick"}),(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:" {"})]}),` `,(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:" "}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Array."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"({ length: starCount });"})]}),` `,(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:" sparkleAnimation"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AnimationSequence"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"_"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:"#9ECBFF"},children:" `.stars-${"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"index"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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:" x: "}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"randomNumberGenerator"}),(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:"#79B8FF"},children:"100"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"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:"#E1E4E8"},children:" y: "}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"randomNumberGenerator"}),(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:"#79B8FF"},children:"100"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"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:"#E1E4E8"},children:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"randomNumberGenerator"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.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:" opacity: "}),(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:" },"})}),` `,(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:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.4"}),(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:" at: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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)(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:" "}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"FadeOut"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AnimationSequence"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"_"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:"#9ECBFF"},children:" `.stars-${"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"index"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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:" opacity: "}),(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:" scale: "}),(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:" },"})}),` `,(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:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.3"}),(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:" at: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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)(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:" sparkleReset"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" AnimationSequence"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"_"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:"#9ECBFF"},children:" `.stars-${"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"index"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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:" x: "}),(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:" y: "}),(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:" },"})}),` `,(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:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.00000000001"}),(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:" at: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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:"#B392F0"},children:" animate"}),(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:" ..."}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkleReset,"})]}),` `,(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:"#9ECBFF"},children:'".letter"'}),(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:"32"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }, { duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.2"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", delay: "}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"stagger"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.05"}),(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:"#9ECBFF"},children:'"button"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", { scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.8"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" }, { duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.1"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", at: "}),(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:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"button"'}),(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:" }, { duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.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:"#F97583"},children:" ..."}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkleAnimation,"})]}),` `,(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:"#9ECBFF"},children:'".letter"'}),(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:" }, { duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.00000000001"}),(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:" ..."}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"sparkles"})}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"FadeOut,"})]}),` `,(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:"#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:'"h-full center"'}),(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:" ref"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{scope}>"})]}),` `,(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:"{handleBtnClick}"})]}),` `,(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:'"border-2 text-2xl px-10 py-1.5 rounded-full transition-colors duration-150 border-border relative"'})]}),` `,(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.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:'"sr-only"'}),(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.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:"#9ECBFF"},children:'"flex items-center justify-center overflow-hidden h-8"'})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" aria-hidden"})}),` `,(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:" {letters."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"letter"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:" <"}),(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:" data-letter"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{letter}"})]}),` `,(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:'"letter inline-block relative h-8 after:h-8 after:absolute after:left-0 after:top-full after:content-[attr(data-letter)] leading-8 text-base"'})]}),` `,(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:"{index}"})]}),` `,(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:" {letter}"})}),` `,(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.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:"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 block -z-10 pointer-events-none"'}),(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:" {Array."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"from"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"({ length: starCount })."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"_"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"Star"})]}),` `,(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:"`w-4 h-4 absolute opacity-0 left-1/2 top-1/2 stars-${"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"index"}),(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:" fill"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"blue"'})]}),` `,(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:"{index}"})]}),` `,(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.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:"#E1E4E8"},children:" Sparkles;"})]})]})})})]}),(0,a.jsxs)(r,{copyId:"checkout",children:[(0,a.jsx)(rS,{}),(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__:"checkout",__rawString__:`"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ShoppingCart } from "lucide-react"; const Checkout = () => { const variants = { initial: { height: 10, opacity: 0, }, animate: { height: 100, opacity: 1, }, exit: { height: 10, opacity: 0, }, }; const [focus, setFocus] = useState(false); return (

setFocus(true)} onMouseLeave={() => setFocus(false)} className="h-12 px-10 text-primary-foreground overflow-hidden z-10 flex items-center gap-2 rounded-xl bg-primary" > Checkout 3 setFocus(false)}> {focus && ( 3 items in cart )}

); }; export default Checkout; `,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:"#9ECBFF"},children:'"use client"'}),(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:" React, { 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:" { motion, AnimatePresence } "}),(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:" { ShoppingCart } "}),(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:"const"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" Checkout"}),(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:" {"})]}),` `,(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:" variants"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},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:" initial: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" height: "}),(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:" 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:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" animate: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" height: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"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:"#E1E4E8"},children:" opacity: "}),(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:" },"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" exit: {"})}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" height: "}),(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:" 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:" },"})}),` `,(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:"#E1E4E8"},children:" ["}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"focus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setFocus"}),(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.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:'"h-full w-full center"'}),(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 z-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:"motion.button"})]}),` `,(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:" setFocus"}),(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:" setFocus"}),(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:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"h-12 px-10 text-primary-foreground overflow-hidden z-10 flex items-center gap-2 rounded-xl bg-primary"'})]}),` `,(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.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:'"text-lg font-semibold"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">Checkout"})]}),` `,(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:'"relative"'}),(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:"ShoppingCart"}),(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-5 w-5 ml-2"'}),(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:" animate"}),(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:" y: focus "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "-100%"'}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" :"}),(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:" opacity: focus "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"?"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:" 0"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" :"}),(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:" }}"})}),` `,(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:"{{"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.2"}),(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:'"text-xs h-4 w-4 rounded-full bg-primary text-primary-foreground -top-1.5 -right-1.5 absolute"'})]}),` `,(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:" 3"})}),` `,(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,{style:{color:"#79B8FF"},children:"AnimatePresence"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" onExitComplete"}),(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:" setFocus"}),(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:" {focus "}),(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.div"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" variants"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{variants}"})]}),` `,(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:"#9ECBFF"},children:'"initial"'})]}),` `,(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:"#9ECBFF"},children:'"animate"'})]}),` `,(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:"#9ECBFF"},children:'"exit"'})]}),` `,(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 bg-primary/50 text-primary-foreground p-2 flex text-lg -z-10 bottom-0 w-full left-0 rounded-xl"'})]}),` `,(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:" 3 items in cart"})}),` `,(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.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.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:"#E1E4E8"},children:" Checkout;"})]})]})})})]}),(0,a.jsxs)(r,{copyId:"second-brain",children:[(0,a.jsx)(dS,{}),(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__:"second-brain",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; import { Sparkles } from "lucide-react"; import { useState } from "react"; const SecondBrain = () => { const [hovering, setHovering] = useState(false); return (

setHovering(true)} onMouseLeave={() => setHovering(false)} className="bg-indigo-500 text-white z-0 relative outline-none border-none text-primary-foreground px-10 py-3 font-medium rounded-xl overflow-hidden hover:shadow-[0_0_10px] hover:shadow-indigo-400" > Get Second Brain

); }; export default SecondBrain; `,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:"#9ECBFF"},children:'"use client"'}),(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.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:" { 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:" { Sparkles } "}),(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:" { 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.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:" SecondBrain"}),(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:" {"})]}),` `,(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:"hovering"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"setHovering"}),(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.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:'"h-full center"'}),(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.button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" whileHover"}),(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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"1.3"}),(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:" 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:" setHovering"}),(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:" setHovering"}),(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:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"bg-indigo-500 text-white z-0 relative outline-none border-none text-primary-foreground px-10 py-3 font-medium rounded-xl overflow-hidden hover:shadow-[0_0_10px] hover:shadow-indigo-400"'})]}),` `,(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.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:'"flex gap-2 items-center z-10 tracking-tight"'}),(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.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:"Sparkles"}),(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"'}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" fill"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"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.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:'"tracking-tight"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">Get Second Brain"})]}),` `,(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.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 top-0 left-0 -translate-x-0 -translate-y-0 shadow-[0_0_10px_inset] -z-10 shadow-indigo-300 rounded-xl"'}),(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.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:' "absolute w-8 h-[200%] bg-indigo-100/10 -top-1/2 -left-5 -z-[20] rotate-12 transition-all duration-300"'}),(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:" hovering "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"&&"}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "left-[90%]"'})]}),` `,(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.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:"#E1E4E8"},children:" SecondBrain;"})]})]})})})]}),(0,a.jsxs)(r,{copyId:"create-new",children:[(0,a.jsx)(pS,{}),(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__:"create-new",__rawString__:`"use client"; import { AnimatePresence, motion } from "framer-motion"; import { BellRing, ClipboardList, Flag, Folder, Plus, StickyNote, Trophy, X, } from "lucide-react"; import { useState } from "react"; const transition = { type: "spring", bounce: 0, duration: 0.4 }; const Items = [ { name: "Project", icon: Folder, }, { name: "Task", icon: ClipboardList, }, { name: "Note", icon: StickyNote, }, { name: "Goal", icon: Trophy, }, { name: "Milestone", icon: Flag, }, { name: "Reminder", icon: BellRing, }, ]; const CreateNew = () => { const [status, setStatus] = useState("idle"); const isOpen = status === "open"; const isHovered = status === "hovered"; return (

{isOpen || isHovered ? (

Create New

{isHovered && ( Close )} setStatus("idle")} initial={{ opacity: 0, x: -20, y: 10 }} animate={{ opacity: 1, x: 0, y: 0 }} exit={{ opacity: 0, x: -20, y: 10 }} transition={{ ...transition, delay: 0.15 }} whileTap={{ scale: 0.9, transition: { ...transition, duration: 0.2 }, }} onHoverStart={() => setStatus("hovered")} onHoverEnd={() => setStatus("open")} className="size-6 flex items-center justify-center rounded-full bg-background" >

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

) : ( setStatus("open")} whileTap={{ scale: 0.95 }} style={{ borderRadius: 22 }} className="flex items-center gap-1.5 bg-primary text-primary-foreground px-5 py-2.5 tracking-tight" > Create New )}

); }; export default CreateNew; `,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:"#9ECBFF"},children:'"use client"'}),(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:" { 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:" {"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" BellRing,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ClipboardList,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Flag,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Folder,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Plus,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" StickyNote,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" Trophy,"})}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" X,"})}),` `,(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:"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:" { 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.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:" transition"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(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:", bounce: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.4"}),(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:" Items"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Project"'}),(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:" icon: Folder,"})}),` `,(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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Task"'}),(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:" icon: ClipboardList,"})}),` `,(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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Note"'}),(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:" icon: StickyNote,"})}),` `,(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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Goal"'}),(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:" icon: Trophy,"})}),` `,(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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Milestone"'}),(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:" icon: Flag,"})}),` `,(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:" name: "}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Reminder"'}),(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:" icon: BellRing,"})}),` `,(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:"#B392F0"},children:" CreateNew"}),(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:" {"})]}),` `,(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:"#79B8FF"},children:"string"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"idle"'}),(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:" isOpen"}),(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:' "open"'}),(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:" isHovered"}),(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:' "hovered"'}),(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:"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:'"size-full center"'}),(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:"#E1E4E8"},children:">"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {isOpen "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"||"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" isHovered "}),(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.div"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layoutId"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Wrapper"'})]}),` `,(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:"{{ borderRadius: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"22"}),(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:'"bg-primary tracking-tight text-primary-foreground"'})]}),` `,(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:'"flex w-full items-center justify-between py-2.5 pl-5 pr-2.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:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"motion.span"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layoutId"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"'}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:"create-new"})}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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"'}),(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:" Create New"})}),` `,(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.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"'}),(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:"#E1E4E8"},children:">"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {isHovered "}),(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.p"})]}),` `,(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:", x: "}),(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:"#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:", x: "}),(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:", x: "}),(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:"#B392F0"},children:" className"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute -left-11 top-0.5 text-sm "'})]}),` `,(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:" Close"})}),` `,(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.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:"#79B8FF"},children:"motion.button"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layout"})}),` `,(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:"{() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},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:'"idle"'}),(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:" 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:", x: "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"20"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", y: "}),(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:"#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:", x: "}),(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:"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:", x: "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"-"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"20"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", y: "}),(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:"#B392F0"},children:" transition"}),(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:"transition, delay: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.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:" whileTap"}),(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:" scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.9"}),(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:" transition: { "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"..."}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"transition, duration: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.2"}),(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:" onHoverStart"}),(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:" setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"hovered"'}),(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:" onHoverEnd"}),(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:" setStatus"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"open"'}),(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:'"size-6 flex items-center justify-center rounded-full bg-background"'})]}),` `,(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:"X"}),(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-4 text-tight text-secondary-foreground"'}),(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,{style:{color:"#79B8FF"},children:"motion.div"})]}),` `,(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:" }}"})]}),` `,(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:"{isHovered "}),(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:", scale: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.95"}),(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:" { opacity: "}),(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:" 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:" }}"})]}),` `,(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:'"flex flex-col gap-2.5 rounded-[22px] bg-muted-foreground p-2.5 border"'})]}),` `,(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:'"grid grid-cols-3 gap-2.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:" {Items."}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:"map"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"(("}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"item"}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:", "}),(0,a.jsx)(t.span,{style:{color:"#FFAB70"},children:"index"}),(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:" <"}),(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:" key"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{index}"})]}),` `,(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:'"size-24 grid cursor-pointer place-items-center rounded-2xl bg-background transition duration-500 ease-in-out hover:bg-background hover:duration-200 active:scale-90"'})]}),` `,(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:'"flex flex-col items-center gap-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:" <"}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"item.icon"}),(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:'"text-muted-foreground"'}),(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:"p"}),(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:'"text-[#6b6967]"'}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:">{item.name}"})]}),` `,(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.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,{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.button"})]}),` `,(0,a.jsxs)(t.span,{className:"line","data-line":"",children:[(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layoutId"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"Wrapper"'})]}),` `,(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:"{() "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},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:'"open"'}),(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:" whileTap"}),(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.95"}),(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:" style"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{{ borderRadius: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"22"}),(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:'"flex items-center gap-1.5 bg-primary text-primary-foreground px-5 py-2.5 tracking-tight"'})]}),` `,(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:"motion.div"})]}),` `,(0,a.jsx)(t.span,{className:"line","data-line":"",children:(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layout"})}),` `,(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:" }}"})]}),` `,(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:" }}"})]}),` `,(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:" }}"})]}),` `,(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:"{{ "}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"..."}),(0,a.jsx)(t.span,{style:{color:"#E1E4E8"},children:"transition, delay: "}),(0,a.jsx)(t.span,{style:{color:"#79B8FF"},children:"0.05"}),(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:"Plus"}),(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-4"'}),(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,{style:{color:"#79B8FF"},children:"motion.span"}),(0,a.jsx)(t.span,{style:{color:"#B392F0"},children:" layoutId"}),(0,a.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"'}),(0,a.jsx)(t.mark,{"data-highlighted-chars":"",children:(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},children:"create-new"})}),(0,a.jsx)(t.span,{style:{color:"#9ECBFF"},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"'}),(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:" Create New"})}),` `,(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.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.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:"#E1E4E8"},children:" CreateNew;"})]})]})})})]})]})}function BP(n={}){let{wrapper:t}=n.components||{};return t?(0,a.jsx)(t,Object.assign({},n,{children:(0,a.jsx)(yS,n)})):yS(n)}var PP=BP;function uS(n,t){throw new Error("Expected "+(t?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return nw(qP);})(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.399.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