54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
export interface HeaderContentViewData {}
|
|
|
|
export function HeaderContentTemplate(_props: HeaderContentViewData) {
|
|
return (
|
|
<>
|
|
<Stack direction="row" align="center" gap={6}>
|
|
<Box as={Link} href="/" display="inline-flex" alignItems="center" group>
|
|
<Box position="relative">
|
|
<Box h={{ base: '24px', md: '28px' }} w="auto" transition opacity={1} groupHoverOpacity={0.8}>
|
|
<Image
|
|
src="/images/logos/wordmark-rectangle-dark.svg"
|
|
alt="GridPilot"
|
|
width={160}
|
|
height={30}
|
|
priority
|
|
/>
|
|
</Box>
|
|
<Box
|
|
position="absolute"
|
|
bottom="-4px"
|
|
left="0"
|
|
w="0"
|
|
h="2px"
|
|
bg="primary-accent"
|
|
transition
|
|
groupHoverWidth="full"
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={6}>
|
|
<Box w="6px" h="6px" rounded="full" bg="primary-accent" animate="pulse" />
|
|
<Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
|
|
MOTORSPORT INFRASTRUCTURE
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
<Stack direction="row" display={{ base: 'none', md: 'flex' }} align="center" gap={1} px={3} py={1} border borderColor="[#23272B]" bg="[#141619]/20">
|
|
<Text size="xs" color="text-gray-600" weight="bold" font="mono">STATUS:</Text>
|
|
<Text size="xs" color="text-success-green" weight="bold" font="mono">OPERATIONAL</Text>
|
|
</Stack>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|