This React component, `GlobalClock`, is a functional component that implements...

February 4, 2025 at 08:47 AM

import { useState, useEffect } from 'react'
import { Button } from "/components/ui/button"
import { Clock } from 'lucide-react'

export default function GlobalClock() {
  const [currentTime, setCurrentTime] = useState(new Date())
  const [is24HourFormat, setIs24HourFormat] = useState(false)

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)

    return () => clearInterval(timer)
  }, [])

  const formattedTime = currentTime.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: !is24HourFormat
  })

  const toggleTimeFormat = () => {
    setIs24HourFormat(!is24HourFormat)
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
      <div className="bg-white p-8 rounded-xl shadow-lg w-full max-w-md">
        <div className="flex items-center justify-center space-x-2 mb-6">
          <Clock className="w-8 h-8 text-primary" />
          <h1 className="text-3xl font-bold">Global Clock</h1>
        </div>
        
        <div className="text-center mb-8">
          <div className="text-6xl font-mono font-bold text-gray-900">
            {formattedTime}
          </div>
          <div className="text-sm text-gray-500 mt-2">
            Your Local Time
          </div>
        </div>

        <div className="flex justify-center">
          <Button 
            variant="outline" 
            onClick={toggleTimeFormat}
            className="w-48"
          >
            Switch to {is24HourFormat ? '12-hour' : '24-hour'} format
          </Button>
        </div>
      </div>
    </div>
  )
}

This React component, GlobalClock, is a functional component that implements a digital clock with the following features:

Real-Time Clock Display:
- The component uses the useState hook to manage the current time (currentTime) and updates it every second using the useEffect hook.
- Inside the useEffect, the setInterval function is used to update the currentTime state with the current time (new Date()) every 1000 milliseconds (1 second).
Time Format Toggle:
- The is24HourFormat state (controlled with useState) determines whether the time is displayed in 24-hour format or 12-hour format.
- The time format is toggled when the user clicks the button labeled "Switch to 24-hour format" or "Switch to 12-hour format" depending on the current setting. The toggleTimeFormat function toggles the state of is24HourFormat.
Formatted Time Display:
- The formattedTime variable is computed using JavaScript's toLocaleTimeString method, which formats the currentTime into a string. The display format depends on the is24HourFormat state:
  - When is24HourFormat is false, 12-hour format (with AM/PM) is used (hour12: true).
  - When is24HourFormat is true, 24-hour format is used (hour12: false).
Styling and Layout:
- The clock display is styled using Tailwind CSS classes (e.g., flex, bg-gray-50, text-6xl, etc.) for responsive and visually appealing design.
- It includes a heading (Global Clock), followed by the formatted time display and a label (Your Local Time).
- Below the clock display, a button allows users to toggle between the two time formats.
External Components:
- The code uses a Button component imported from /components/ui/button, which likely represents a reusable button UI component.
- A Clock icon is imported from lucide-react and displayed next to the main heading (Global Clock).
Unmount Handling (Cleanup):
- The setInterval timer is cleared when the component is unmounted (return () => clearInterval(timer)) to prevent memory leaks or unnecessary updates.

In summary, this code implements a fully functional and styled global clock that continuously updates in real time and allows users to toggle between 12-hour and 24-hour time formats.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr