国风倒计时页面设计

import React, { useState, useEffect } from 'react';

const App = () => {
  const targetDate = new Date('2025-01-01T00:00:00');
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  function calculateTimeLeft() {
    const difference = +targetDate - +new Date();
    let timeLeft = {};

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60)
      };
    }

    return timeLeft;
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    return () => clearTimeout(timer);
  });

  const formatTime = (time) => time < 10 ? `0${time}` : time;

  return (
    <div className="flex h-screen bg-gradient-to-r from-green-400 to-blue-500 text-white">
      <div className="w-1/5 bg-opacity-50 bg-black p-6">
        <h1 className="text-3xl font-bold mb-6">Countdown</h1>
        <nav>
          <ul>
            <li className="mb-4"><a href="#" className="hover:text-gray-400">Home</a></li>
            <li className="mb-4"><a href="#" className="hover:text-gray-400">About</a></li>
            <li className="mb-4"><a href="#" className="hover:text-gray-400">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div className="w-4/5 flex justify-center items-center">
        <div className="text-center">
          <h1 className="text-6xl font-bold mb-12">Countdown to New Year 2025</h1>
          <div className="flex justify-center space-x-8">
            <div className="bg-black bg-opacity-50 p-6 rounded-lg">
              <div className="text-6xl font-bold">{formatTime(timeLeft.days)}</div>
              <div className="text-2xl">Days</div>
            </div>
            <div className="bg-black bg-opacity-50 p-6 rounded-lg">
              <div className="text-6xl font-bold">{formatTime(timeLeft.hours)}</div>
              <div className="text-2xl">Hours</div>
            </div>
            <div className="bg-black bg-opacity-50 p-6 rounded-lg">
              <div className="text-6xl font-bold">{formatTime(timeLeft.minutes)}</div>
              <div className="text-2xl">Minutes</div>
            </div>
            <div className="bg-black bg-opacity-50 p-6 rounded-lg">
              <div className="text-6xl font-bold">{formatTime(timeLeft.seconds)}</div>
              <div className="text-2xl">Seconds</div>
            </div>
          </div>
        </div>
      </div>
      <footer className="absolute bottom-0 w-full text-center p-4 bg-black bg-opacity-50">
        © 2025 Countdown App. All rights reserved.
      </footer>
    </div>
  );
};

export default App;