90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Container } from '@/ui/Container';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { BrandMark } from '@/ui/BrandMark';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface AppFooterProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* AppFooter is the bottom section of the application.
|
|
* It follows the "Telemetry Workspace" structure: matte surface, thin separators, minimal.
|
|
* Aligned with ControlBar (Header) design.
|
|
*/
|
|
export function AppFooter({ children }: AppFooterProps) {
|
|
return (
|
|
<Surface
|
|
as="footer"
|
|
variant="muted"
|
|
paddingY={8}
|
|
marginTop="auto"
|
|
borderTop={true}
|
|
>
|
|
<Container size="xl">
|
|
{children ? (
|
|
children
|
|
) : (
|
|
<Grid cols={{ base: 1, md: 4 }} gap={12}>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<BrandMark />
|
|
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={4}>
|
|
<Box w="4px" h="4px" rounded="full" bg="primary-accent" animate="pulse" />
|
|
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
|
|
INFRASTRUCTURE
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
<Text size="sm" variant="low" maxWidth="xs">
|
|
The ultimate companion for sim racers. Track your performance, manage your team, and compete in leagues.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Platform</Text>
|
|
<Stack gap={2}>
|
|
<Link href="/leagues" variant="secondary">Leagues</Link>
|
|
<Link href="/teams" variant="secondary">Teams</Link>
|
|
<Link href="/leaderboards" variant="secondary">Leaderboards</Link>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Support</Text>
|
|
<Stack gap={2}>
|
|
<Link href="/docs" variant="secondary">Documentation</Link>
|
|
<Link href="/status" variant="secondary">System Status</Link>
|
|
<Link href="/contact" variant="secondary">Contact Us</Link>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack gap={4}>
|
|
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Legal</Text>
|
|
<Stack gap={2}>
|
|
<Link href="/privacy" variant="secondary">Privacy Policy</Link>
|
|
<Link href="/terms" variant="secondary">Terms of Service</Link>
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
)}
|
|
|
|
<Box borderTop marginTop={8} paddingTop={6} display="flex" justifyContent="between" alignItems="center">
|
|
<Text size="xs" variant="low">
|
|
© {new Date().getFullYear()} GridPilot. All rights reserved.
|
|
</Text>
|
|
<Stack direction="row" gap={4}>
|
|
<Text size="xs" variant="low" font="mono">v1.0.0-stable</Text>
|
|
<Box w="4px" h="4px" rounded="full" bg="success-green" />
|
|
</Stack>
|
|
</Box>
|
|
</Container>
|
|
</Surface>
|
|
);
|
|
}
|