{children}

{testimonial.name} - {testimonial.company}

) } export function Tabs() { const masonryContainer = useMasonry() const [category, setCategory] = useState(1) return (

{/* Buttons */}

{/* Button #1 */} {/* Button #2 */} {/* Button #3 */} {/* Button #4 */} {/* Button #5 */}

) }`,__src__:"registry/default/example/animation-tabs.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useEffect, useRef, useState } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useMasonry"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"masonryContainer"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setItems"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ChildNode"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]>([])"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (masonryContainer.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"masonryItem"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(masonryContainer.current.children)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setItems"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(masonryItem)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, [])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleMasonry"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"items "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" items."}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"length"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" gapSize "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (masonryContainer.current) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" gapSize "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"parseInt"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" window"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getComputedStyle"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(masonryContainer.current)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getPropertyValue"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"grid-row-gap"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" items."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"el"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(el "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"instanceof"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" previous "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el.previousSibling"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"while"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (previous) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" (previous.nodeType "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el.style.marginTop "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" previous "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"instanceof"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"&&"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementLeft"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(previous) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementLeft"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(el)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ) {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el.style.marginTop "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementTop"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(el) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementBottom"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(previous) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" gapSize) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"px"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"break"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" previous "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" previous.previousSibling"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleMasonry"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" window."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", handleMasonry)"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" window."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"resize"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", handleMasonry)"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, [items])"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementLeft"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"el"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getBoundingClientRect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"().left"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementTop"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"el"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getBoundingClientRect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"().top "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" window.scrollY"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"elementBottom"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"el"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"HTMLElement"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" el."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getBoundingClientRect"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"().bottom "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" window.scrollY"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" masonryContainer"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Testimonial"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"testimonial"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"testimonial"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"company"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"content"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"string"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"categories"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"[]"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"number"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ReactNode"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}) {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"article"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`relative rounded-2xl bg-gradient-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-sm transition-opacity before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,theme(colors.gray.800),theme(colors.gray.700),theme(colors.gray.800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"testimonial"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"categories"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"includes"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-30"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-col gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:`"text-indigo-200/65 before:content-['\u201C'] after:content-['\u201D']"`}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center gap-3"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-sm font-medium text-gray-200"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"testimonial.name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-700"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"> - "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"a"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-200/65 transition-colors hover:text-indigo-500"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"#0"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"testimonial.company"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Tabs"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"masonryContainer"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useMasonry"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mx-auto max-w-6xl px-4 sm:px-6 bg-black rounded-lg"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"border-t py-12 [border-image:linear-gradient(to_right,transparent,theme(colors.slate.400/.25),transparent)1] md:py-20"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Buttons */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex justify-center pb-12 max-md:hidden md:pb-16"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative inline-flex flex-wrap justify-center rounded-[1.25rem] bg-gray-800/40 p-1 text-white"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Button #1 */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-200 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-gradient-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,theme(colors.indigo.500/0),theme(colors.indigo.500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-65 transition-opacity hover:opacity-90"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-pressed"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`fill-current ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-500"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"16"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"M.062 10.003a1 1 0 0 1 1.947.455c-.019.08.01.152.078.19l5.83 3.333c.052.03.115.03.168 0l5.83-3.333a.163.163 0 0 0 .078-.188 1 1 0 0 1 1.947-.459 2.161 2.161 0 0 1-1.032 2.384l-5.83 3.331a2.168 2.168 0 0 1-2.154 0l-5.83-3.331a2.162 2.162 0 0 1-1.032-2.382Zm7.854-7.981-5.83 3.332a.17.17 0 0 0 0 .295l5.828 3.33c.054.031.118.031.17.002l5.83-3.333a.17.17 0 0 0 0-.294L8.085 2.023a.172.172 0 0 0-.17-.001ZM9.076.285l5.83 3.332c1.458.833 1.458 2.935 0 3.768l-5.83 3.333c-.667.38-1.485.38-2.153-.001l-5.83-3.332c-1.457-.833-1.457-2.935 0-3.767L6.925.285a2.173 2.173 0 0 1 2.15 0Z"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">All Template"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Button #2 */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-200 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-gradient-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,theme(colors.indigo.500/0),theme(colors.indigo.500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-65 transition-opacity hover:opacity-90"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-pressed"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`fill-current ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-500"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"16"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"M6.5 3.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM9 6.855A3.502 3.502 0 0 0 8 0a3.5 3.5 0 0 0-1 6.855v1.656L5.534 9.65a3.5 3.5 0 1 0 1.229 1.578L8 10.267l1.238.962a3.5 3.5 0 1 0 1.229-1.578L9 8.511V6.855Zm2.303 4.74c.005-.005.01-.01.013-.016l.012-.016a1.5 1.5 0 1 1-.025.032ZM3.5 11A1.497 1.497 0 0 1 5 12.5 1.5 1.5 0 1 1 3.5 11Z"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Next.js"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Button #3 */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-200 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"3"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-gradient-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,theme(colors.indigo.500/0),theme(colors.indigo.500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-65 transition-opacity hover:opacity-90"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-pressed"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`fill-current ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"3"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-500"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"16"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"M2.428 10c.665-1.815 1.98-3.604 3.44-4.802-.6-1.807-1.443-3.079-2.29-3.18-1.91-.227-2.246 2.04-.174 2.962a1 1 0 1 1-.813 1.827C-1.407 5.028-.589-.491 3.815.032c1.605.191 2.925 1.811 3.79 4.07.979-.427 1.937-.51 2.735-.092.818.429 1.143 1.123 1.294 2.148.015.1.022.149.043.32.542-.537 1.003-.797 1.693-.622.64.162.894.493 1.195 1.147l.018.04a1 1 0 0 1 1.133 1.61c-.46.47-1.12.574-1.744.398a1.661 1.661 0 0 1-.87-.592 2.127 2.127 0 0 1-.224-.349 3.225 3.225 0 0 1-.55.477c-.377.253-.8.368-1.259.267-.993-.218-1.21-.779-1.367-2.05-.027-.22-.033-.262-.046-.353-.067-.452-.144-.617-.244-.67-.225-.118-.665-.013-1.206.278.297 1.243.475 2.587.516 3.941H15a1 1 0 0 1 0 2H8.68l-.025.285c-.173 1.918-.906 3.381-2.654 3.668-1.5.246-3.013-.47-3.677-1.858-.29-.637-.39-1.35-.342-2.095H1a1 1 0 0 1 0-2h1.428Zm2.11 0h2.175a18.602 18.602 0 0 0-.284-2.577c-.205.202-.408.42-.606.654A9.596 9.596 0 0 0 4.537 10Zm2.135 2H3.942c-.032.465.03.888.194 1.25.258.538.89.836 1.54.73.546-.09.888-.772.988-1.875L6.673 12Z"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Vue"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Button #4 */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-200 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-gradient-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,theme(colors.indigo.500/0),theme(colors.indigo.500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-65 transition-opacity hover:opacity-90"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-pressed"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`fill-current ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"4"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-500"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"16"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"M3.757 3.758a6 6 0 0 1 8.485 8.485 5.992 5.992 0 0 1-5.301 1.664 1 1 0 1 0-.351 1.969 8 8 0 1 0-4.247-2.218 1 1 0 0 0 1.415-.001L9.12 8.294v1.827a1 1 0 1 0 2 0v-4.2a.997.997 0 0 0-1-1.042H5.879a1 1 0 1 0 0 2h1.829l-4.599 4.598a6 6 0 0 1 .648-7.719Z"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">React"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#8B949E"},children:"/* Button #5 */"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-200 ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"5"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"relative bg-gradient-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,theme(colors.indigo.500/0),theme(colors.indigo.500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"opacity-65 transition-opacity hover:opacity-90"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-pressed"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setCategory"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`fill-current ${"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"category"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-indigo-500"'}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-gray-600"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"16"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"16"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"path"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"M13.95.879a3 3 0 0 0-4.243 0L1.293 9.293a1 1 0 0 0-.274.51l-1 5a1 1 0 0 0 1.177 1.177l5-1a1 1 0 0 0 .511-.273l1.16-1.16a1 1 0 0 0-1.414-1.414l-.946.946-3.232.646.646-3.232 8.2-8.2a1 1 0 0 1 1.414 0l1.172 1.172a1 1 0 0 1 0 1.414l-.55.549a1 1 0 0 0 1.415 1.414l.55-.55a3 3 0 0 0 0-4.241L13.948.879ZM3.25 4.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm11.474 6.029-1.521-.752-.752-1.521c-.168-.341-.73-.341-.896 0l-.752 1.52-1.521.753a.498.498 0 0 0 0 .896l1.52.752.753 1.52a.5.5 0 0 0 .896 0l.752-1.52 1.52-.752a.498.498 0 0 0 0-.896Z"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Flutter"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(o,{defaultValue:"manual",children:(0,e.jsx)(r,{value:"manual",children:(0,e.jsx)(i,{children:(0,e.jsx)(t,{children:"Copy and paste the clock code into your project."})})})})]})}function A(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(y,n)})):y(n)}var v=A;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(x);})(); ;return Component;

Animations tabs

Usage

Copy and paste the clock code into your project.