Clock

1'use client';
2 
3import React from 'react';
4import { motion } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7const Clock: React.FC<{ className?: string; children?: React.ReactNode }> = ({
8  className,
9  children,
10}) => {
11  const isMobile = typeof window !== 'undefined' && window.innerWidth < 640;
12 
13  const hourDuration = isMobile ? 30 : 20;
14  const minuteDuration = isMobile ? 15 : 10;
15  const secondDuration = isMobile ? 6 : 3;
16 
17  return (
18    <div className={cn('w-full', className)}>
19      <motion.div
20        className='absolute w-[min(24rem,80vw)] h-[min(24rem,80vw)] rounded-full blur-3xl'
21        animate={{
22          background: [
23            'radial-gradient(circle at 30% 50%, rgba(234, 88, 12, 0.2), transparent 40%)',
24            'radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.2), transparent 40%)',
25          ],
26        }}
27        transition={{
28          duration: 6,
29          repeat: Infinity,
30          repeatType: 'reverse',
31          ease: 'easeInOut',
32        }}
33      />
34 
35      <div className='relative w-full max-w-[24rem] aspect-square p-4 sm:p-8 z-10'>
36        <div className='relative w-full h-full rounded-full flex items-center justify-center'>
37          <svg
38            viewBox='0 0 100 100'
39            className='absolute inset-0 w-full h-full rounded-full'
40          >
41            <defs>
42              <linearGradient id='metalGrad' x1='0%' y1='0%' x2='0%' y2='100%'>
43                <stop offset='0%' stopColor='#e8e8e8' />
44                <stop offset='50%' stopColor='#b0b0b0' />
45                <stop offset='100%' stopColor='#949494' />
46              </linearGradient>
47            </defs>
48            <circle
49              cx='50'
50              cy='50'
51              r='48'
52              fill='url(#metalGrad)'
53              stroke='url(#metalGrad)'
54              strokeWidth='2'
55            />
56          </svg>
57          <div
58            className='absolute inset-[3%] rounded-full bg-linear-to-br from-gray-800 via-gray-900 to-black shadow-inner'
59            style={{
60              boxShadow:
61                'inset 0 6px 30px rgba(0,0,0,0.95), inset 0 -2px 15px rgba(255,255,255,0.05)',
62            }}
63          >
64            <motion.div
65              className='absolute inset-0 rounded-full'
66              animate={{ rotate: 360 }}
67              transition={{
68                duration: 40,
69                repeat: Infinity,
70                ease: 'linear',
71              }}
72              style={{
73                background: `conic-gradient(
74// … truncated