73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import { AppShellBar } from './AppShellBar';
|
|
import { Activity, Database, Server, Wifi } from 'lucide-react';
|
|
|
|
export function AppFooter() {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<AppShellBar position="bottom">
|
|
{/* Left: System Info */}
|
|
<Box display="flex" alignItems="center" gap={6}>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
|
|
<Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
|
|
GRIDPILOT OS v2.0
|
|
</Text>
|
|
</Box>
|
|
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
|
|
© {currentYear}
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Center: Telemetry Status */}
|
|
<Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
|
|
<StatusIndicator icon={Database} label="DB" status="good" />
|
|
<StatusIndicator icon={Server} label="API" status="good" />
|
|
<StatusIndicator icon={Wifi} label="WS" status="good" />
|
|
<Box className="h-3 w-px bg-outline-steel" />
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Activity size={12} className="text-text-low" />
|
|
<Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Right: Legal & Tools */}
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<FooterLink href="/terms">Terms</FooterLink>
|
|
<FooterLink href="/privacy">Privacy</FooterLink>
|
|
<FooterLink href="/status">Status</FooterLink>
|
|
</Box>
|
|
</AppShellBar>
|
|
);
|
|
}
|
|
|
|
function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
|
|
const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
|
|
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
|
|
<Icon size={10} className={color} />
|
|
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|