2e9571a74e
- Add dark industrial theme with brand color #c20600 and CSS variables - Create Header component with version display and user dropdown menu - Create StatusBar with connection indicator and project/session display - Create ProjectManager page with CRUD, list view, and inspector - Add JWT Bearer token to API requests for authenticated endpoints - Add project API endpoints (GET/POST/PUT/DELETE /api/v1/projects) - Add ProjectService methods: findById, findBySlug, delete - Add unit tests for project API endpoints - Add Playwright E2E tests for projects flow - Update UI design guide with implementation details - Fix: empty JSON body parsing in web-app.ts middleware
43 lines
964 B
TypeScript
43 lines
964 B
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
function formatTime(date: Date): string {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true,
|
|
});
|
|
}
|
|
|
|
function formatDate(date: Date): string {
|
|
return date.toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
export default function Clock() {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="p-3">
|
|
<div className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
|
|
Clock
|
|
</div>
|
|
<div className="font-mono text-lg text-text-primary">
|
|
{formatTime(time)}
|
|
</div>
|
|
<div className="text-sm text-text-secondary">
|
|
{formatDate(time)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |