Tạo đồng hồ đặt bất cứ đâu

Để tạo đồng hồ hiển thị thời gian ở bất cứ đâu trên trang Web hầu dễ dàng biết được ta đang ở thời điểm nào trong ngày. Làm một đồng hồ đơn giản, dễ dàng tùy biến, ta cần thực hiện những bước sau:

1)Tạo file "src/theme/Clock.js"có nội dung:

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

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
      console.log("Clock updated:", time.toLocaleTimeString()); // ✅ Debug log
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div className="navbar-clock">{time.toLocaleTimeString()}</div>;
}

export default Clock;

2)Tạo 1 file override Layout: "src/theme/Layout/index.js" với nội dung:

import React from 'react';
import OriginalLayout from '@theme-original/Layout';
import Clock from '@site/src/theme/Clock'; // đảm bảo đường dẫn đúng

export default function LayoutWrapper(props) {
  return (
    <div>
      <OriginalLayout {...props} />
      <div
        style={{
          position: 'fixed',
          right: '1016px',
          bottom: '475px',
          width: '120px',       // Điều chỉnh chiều ngang khung
          height: '40px',       // Điều chỉnh chiều cao khung
          color: red, /* Đổi màu để dễ nhìn */
          backgroundColor: 'transparent',  // Nền trong suốt
          padding: '5px 3px',
          borderRadius: '5px',
          boxShadow: 'none',    // Nếu không cần bóng đổ
          zIndex: 2000,
          textAlign: 'center',  // Canh giữa chữ
        }}
      >
        <Clock />
      </div>
    </div>
  );
}

Muc đích dùng file này với những cấu hình cần thiết về kiểu dáng đồng hồ, hiệu ứng nền trong suốt

(transparent),

chiều rộng, chiều cao khung và vị trí đặt trên trang... điều chỉnh

"width", "bottom" 

để đặt đồng hồ ở vị trí mong muốn!