65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useSidebar } from '@/components/layout/SidebarContext';
|
|
import { Box } from '@/ui/Box';
|
|
import { Link } from '@/ui/Link';
|
|
import { ShellFooter } from '@/ui/shell/Shell';
|
|
import { Text } from '@/ui/Text';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function AppFooter() {
|
|
const { isCollapsed } = useSidebar();
|
|
|
|
// Clock
|
|
const [time, setTime] = useState<string>('');
|
|
useEffect(() => {
|
|
const updateTime = () => {
|
|
const now = new Date();
|
|
setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
|
|
};
|
|
updateTime();
|
|
const interval = setInterval(updateTime, 60000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<ShellFooter collapsed={isCollapsed}>
|
|
{/* Left: System Info */}
|
|
<Box display="flex" alignItems="center" gap={6} flex={1}>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
|
|
<Text size="xs" variant="med" font="mono" style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
|
GRIDPILOT
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Center: Time */}
|
|
<Box display="flex" alignItems="center" justifyContent="center" flex={1}>
|
|
<Text size="sm" font="mono" variant="med" style={{ letterSpacing: '0.1em' }}>
|
|
{time} UTC
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Right: Legal & Tools */}
|
|
<Box display="flex" alignItems="center" justifyContent="end" gap={2} flex={1}>
|
|
<FooterLink href="/terms">Terms</FooterLink>
|
|
<FooterLink href="/privacy">Privacy</FooterLink>
|
|
<FooterLink href="/status">Status</FooterLink>
|
|
</Box>
|
|
</ShellFooter>
|
|
);
|
|
}
|
|
|
|
function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
variant="ghost"
|
|
className="px-2 py-1 rounded hover:bg-white/5 text-text-low hover:text-text-high font-mono text-[10px] uppercase tracking-wider transition-colors"
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|