import { useEffect, useState } from "react";

const ClockWidget = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const hours = time.getHours();
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();

  // Calculate rotation angles
  const secondDegrees = seconds * 6;
  const minuteDegrees = minutes * 6 + seconds * 0.1;
  const hourDegrees = (hours % 12) * 30 + minutes * 0.5;

  // Format time
  const formatTime = () => {
    const h = hours % 12 || 12;
    const ampm = hours >= 12 ? "pm" : "am";
    return `${h}${ampm}`;
  };

  // Format date
  const formatDate = () => {
    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    const months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];

    const day = time.getDate();
    const suffix =
      day === 1 || day === 21 || day === 31
        ? "st"
        : day === 2 || day === 22
          ? "nd"
          : day === 3 || day === 23
            ? "rd"
            : "th";

    return `${days[time.getDay()]}, ${day}${suffix} ${months[time.getMonth()]}`;
  };

  return (
    <div className="flex items-center gap-8 p-6 pr-10 rounded-[2rem] bg-amber-400">
      {/* SVG Analog Clock */}
      <svg
        viewBox="0 0 100 100"
        className="w-32 h-32"
        style={{
          filter: "drop-shadow(2px 2px 4px hsl(var(--clock-shadow) / 0.3))",
        }}
      >
        {/* Clock face background */}
        <circle
          cx="50"
          cy="50"
          r="48"
          className="fill-neutral-100 stroke-pink-400"
          strokeWidth="0.5"
        />

        {/* Minute markers */}
        {Array.from({ length: 60 }, (_, i) => {
          const isHour = i % 5 === 0;
          const angle = (i * 6 - 90) * (Math.PI / 180);
          const innerR = isHour ? 40 : 43;
          const outerR = 46;
          const x1 = 50 + innerR * Math.cos(angle);
          const y1 = 50 + innerR * Math.sin(angle);
          const x2 = 50 + outerR * Math.cos(angle);
          const y2 = 50 + outerR * Math.sin(angle);

          return (
            <line
              key={i}
              x1={x1}
              y1={y1}
              x2={x2}
              y2={y2}
              className={isHour ? "stroke-pink-400" : "stroke-pink-400"}
              strokeWidth={isHour ? 1.5 : 0.5}
              strokeLinecap="round"
            />
          );
        })}

        {/* Hour hand - tapered */}
        <g transform={`rotate(${hourDegrees}, 50, 50)`}>
          <path d="M48.5 50 L50 22 L51.5 50 Z" className="fill-pink-500" />
          <rect
            x="49"
            y="50"
            width="2"
            height="8"
            rx="1"
            className="bg-pink-500"
          />
        </g>

        {/* Minute hand - tapered and longer */}
        <g transform={`rotate(${minuteDegrees}, 50, 50)`}>
          <path d="M49 50 L50 12 L51 50 Z" className="fill-clock-hand" />
          <rect
            x="49.25"
            y="50"
            width="1.5"
            height="6"
            rx="0.75"
            className="fill-clock-hand"
          />
        </g>

        {/* Second hand - thin with counterweight */}
        <g transform={`rotate(${secondDegrees}, 50, 50)`}>
          <line
            x1="50"
            y1="58"
            x2="50"
            y2="10"
            className="stroke-pink-700"
            strokeWidth="0.8"
            strokeLinecap="round"
          />
          <circle cx="50" cy="56" r="2" className="fill-pink-700" />
        </g>

        {/* Center cap */}
        <circle cx="50" cy="50" r="3" className="fill-pink-300" />
        <circle cx="50" cy="50" r="1.5" className="fill-pink-400" />
      </svg>
      {/* Digital Display */}
      <div className="flex flex-col">
        <span className="text-4xl font-light tracking-tight text-foreground">
          {formatTime()}
        </span>
        <span className="text-sm font-normal mt-1 text-muted-foreground">
          {formatDate()}
        </span>
      </div>
    </div>
  );
};

export default ClockWidget;
Clock Widget Pattern

Default

Index

We use cookies
