Files
gridpilot.gg/apps/website/ui/BrandMark.tsx
2026-01-18 22:55:55 +01:00

42 lines
1.2 KiB
TypeScript

import { Box } from '@/ui/primitives/Box';
import Image from 'next/image';
import { Link } from '@/ui/Link';
import React from 'react';
interface BrandMarkProps {
href?: string;
priority?: boolean;
}
/**
* BrandMark provides the consistent logo/wordmark for the application.
* Aligned with "Precision Racing Minimal" theme.
*/
export function BrandMark({ href = '/', priority = false }: BrandMarkProps) {
return (
<Link href={href} variant="inherit" underline="none">
<Box position="relative" display="inline-flex" alignItems="center">
<Box height={{ base: '1.5rem', md: '1.75rem' }} style={{ transition: 'opacity 0.2s' }}>
<Image
src="/images/logos/wordmark-rectangle-dark.svg"
alt="GridPilot"
width={160}
height={30}
priority={priority}
style={{ height: '100%', width: 'auto' }}
/>
</Box>
<Box
position="absolute"
bottom="-4px"
left="0"
width="0"
height="2px"
bg="var(--ui-color-intent-primary)"
style={{ transition: 'width 0.2s' }}
/>
</Box>
</Link>
);
}