32 lines
882 B
TypeScript
32 lines
882 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import './MenuBar.css';
|
|
|
|
const MENU_ITEMS = ['File', 'Edit', 'View', 'Go', 'Help'];
|
|
|
|
export default function MenuBar() {
|
|
const [time, setTime] = useState(() => formatTime(new Date()));
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => setTime(formatTime(new Date())), 1000);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="menubar">
|
|
<div className="menubar-left">
|
|
<span className="menubar-logo"></span>
|
|
{MENU_ITEMS.map(item => (
|
|
<span key={item} className="menubar-item">{item}</span>
|
|
))}
|
|
</div>
|
|
<div className="menubar-right">
|
|
<span className="menubar-clock">{time}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatTime(d: Date) {
|
|
return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
|
|
}
|