{hours} : {minutes} : {seconds} {amPm}

) } `,__src__:"registry/default/example/super-clock.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { useEffect, useState } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"react"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { AnimatePresence, motion } "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"framer-motion"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"ClockFace"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"hours"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setHours"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"00"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"minutes"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setMinutes"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"00"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"seconds"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setSeconds"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"00"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"amPm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"setAmPm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"AM"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"useEffect"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"updateClock"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"currentTime"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"new"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"Date"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"let"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" hrs "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" currentTime."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getHours"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"mins"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" currentTime."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getMinutes"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"secs"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" currentTime."}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"getSeconds"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"()"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setHours"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hrs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""}${'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hrs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"12"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hrs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"12"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hrs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setMinutes"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"mins"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""}${'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"mins"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setSeconds"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"`${"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"secs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"10"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"0"'}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'""}${'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"secs"}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setAmPm"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(hrs "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"12"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"AM"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"PM"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"updateClock"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Initial call to set clock immediately"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"interval"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"setInterval"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(updateClock, "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1000"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Update every second"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" () "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D2A8FF"},children:"clearInterval"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"(interval) "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// Cleanup on component unmount"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, [])"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"flipAnimation"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" initial: { y: "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"-"}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// \u4ECE\u4E0A\u65B9\u6EDA\u52A8\u8FDB\u5165"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" animate: { y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"1"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// \u505C\u6B62\u5728\u4E2D\u5FC3"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" exit: { y: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"40"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:", opacity: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// \u5411\u4E0B\u6EDA\u52A8\u9000\u51FA"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" transition: { duration: "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"0.2"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }, "}),(0,n.jsx)(l.span,{style:{color:"#8B949E"},children:"// \u52A8\u753B\u65F6\u957F"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex justify-center items-center"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-ful h-40 md:h-48 lg:h-52 py-6 px-4 rounded-3xl flex justify-center items-center bg-white dark:bg-gray-800 shadow-lg dark:shadow-gray-900"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex font-bold text-6xl sm:text-7xl md:text-7xl lg:text-9xl text-center text-gray-800 dark:text-gray-200"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"mode"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"popLayout"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hours"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"flipAnimation"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"inline-block"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"hours"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-bold text-6xl sm:text-6xl md:text-7xl lg:text-9xl font-mono"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" :"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex font-bold text-6xl sm:text-7xl md:text-7xl lg:text-9xl text-center text-gray-800 dark:text-gray-200"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"mode"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"popLayout"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"minutes"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"flipAnimation"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"inline-block"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"minutes"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-bold text-6xl sm:text-6xl md:text-7xl lg:text-9xl font-mono"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" :"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-bold text-6xl sm:text-7xl md:text-7xl lg:text-9xl text-center text-gray-800 dark:text-gray-200"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"AnimatePresence"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"mode"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"popLayout"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"motion.span"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"key"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"seconds"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{..."}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"flipAnimation"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"inline-block"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"seconds"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"font-bold ml-3 mt-5 sm:mt-7 md:mt-4 lg:mt-11 text-xl sm:text-3xl md:text-4xl lg:text-5xl font-sans text-gray-600 dark:text-gray-400"'}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"amPm"}),(0,n.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(r,{defaultValue:"manual",children:(0,n.jsx)(c,{value:"manual",children:(0,n.jsx)(t,{children:(0,n.jsx)(i,{children:"Copy and paste the clock code into your project."})})})})]})}function E(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(y,e)})):y(e)}var g=E;function o(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(k);})(); ;return Component;

Super Digital clock

Installation

Copy and paste the clock code into your project.