86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { SponsorLogo } from '@/ui/SponsorLogo';
|
|
|
|
interface SponsorBrandingPreviewProps {
|
|
name: string;
|
|
logoUrl?: string;
|
|
primaryColor?: string;
|
|
secondaryColor?: string;
|
|
}
|
|
|
|
/**
|
|
* SponsorBrandingPreview
|
|
*
|
|
* Visualizes how a sponsor's branding (logo and colors) will appear on the platform.
|
|
*/
|
|
export function SponsorBrandingPreview({
|
|
name,
|
|
logoUrl,
|
|
primaryColor = '#198CFF',
|
|
secondaryColor = '#141619'
|
|
}: SponsorBrandingPreviewProps) {
|
|
return (
|
|
<Card p={0} overflow="hidden">
|
|
<Box p={4} borderBottom borderColor="border-charcoal-outline">
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
|
|
Branding Preview
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box p={6}>
|
|
<Stack gap={6}>
|
|
{/* Logo Preview */}
|
|
<Stack align="center" gap={4}>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
padding={8}
|
|
bg="bg-iron-gray/10"
|
|
border
|
|
borderColor="border-charcoal-outline/50"
|
|
w="full"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<SponsorLogo src={logoUrl} alt={name} size={64} />
|
|
</Surface>
|
|
<Text size="sm" color="text-gray-400">Primary Logo Asset</Text>
|
|
</Stack>
|
|
|
|
{/* Color Palette */}
|
|
<Box>
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-500" block mb={3}>
|
|
Color Palette
|
|
</Text>
|
|
<Stack direction="row" gap={4}>
|
|
<Stack gap={2} flexGrow={1}>
|
|
<Box h={12} rounded="lg" backgroundColor={primaryColor} border borderColor="border-white/10" />
|
|
<Text size="xs" color="text-gray-400" textAlign="center">{primaryColor}</Text>
|
|
</Stack>
|
|
<Stack gap={2} flexGrow={1}>
|
|
<Box h={12} rounded="lg" backgroundColor={secondaryColor} border borderColor="border-white/10" />
|
|
<Text size="xs" color="text-gray-400" textAlign="center">{secondaryColor}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Mockup Hint */}
|
|
<Surface variant="muted" rounded="lg" padding={3} bg="bg-primary-blue/5" border borderColor="border-primary-blue/20">
|
|
<Text size="xs" color="text-primary-blue" textAlign="center">
|
|
These assets will be used for broadcast overlays and car liveries.
|
|
</Text>
|
|
</Surface>
|
|
</Stack>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|