mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 00:33:24 +01:00
parent 6df1b50536
commit e9dfe15dff
12 changed files with 376 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/website/components/layout/AppFooter.tsx
View File

@@ -1,43 +1,47 @@
'use client';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';
import { AppShellBar } from './AppShellBar';
import { Activity, Database, Server, Wifi } from 'lucide-react';
export function AppFooter() {
const currentYear = new Date().getFullYear();
// 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 (
<AppShellBar position="bottom">
{/* Left: System Info */}
<Box display="flex" alignItems="center" gap={6}>
<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" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
GRIDPILOT OS v2.0
GRIDPILOT
</Text>
</Box>
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
© {currentYear}
</Box>
{/* Center: Time */}
<Box display="flex" alignItems="center" justifyContent="center" flex={1}>
<Text size="sm" font="mono" className="text-text-med tracking-widest tabular-nums">
{time} UTC
</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}>
<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>
@@ -46,19 +50,6 @@ export function AppFooter() {
);
}
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