115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { Image } from '@/ui/Image';
|
|
|
|
interface TeamDetailsHeaderProps {
|
|
teamId: string;
|
|
name: string;
|
|
tag?: string;
|
|
description?: string;
|
|
logoUrl?: string;
|
|
memberCount: number;
|
|
foundedDate?: string;
|
|
isAdmin?: boolean;
|
|
onAdminClick?: () => void;
|
|
}
|
|
|
|
export function TeamDetailsHeader({
|
|
name,
|
|
tag,
|
|
description,
|
|
logoUrl,
|
|
memberCount,
|
|
foundedDate,
|
|
isAdmin,
|
|
onAdminClick,
|
|
}: TeamDetailsHeaderProps) {
|
|
return (
|
|
<Box
|
|
bg="surface-charcoal"
|
|
border
|
|
borderColor="outline-steel"
|
|
p={8}
|
|
position="relative"
|
|
overflow="hidden"
|
|
>
|
|
{/* Background accent */}
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
right="0"
|
|
w="64"
|
|
h="64"
|
|
bg="primary-accent/5"
|
|
rounded="full"
|
|
blur="3xl"
|
|
translate="-1/2, -1/2"
|
|
/>
|
|
|
|
<Stack direction="row" align="start" gap={8} position="relative">
|
|
<Box
|
|
w="32"
|
|
h="32"
|
|
bg="base-black"
|
|
border
|
|
borderColor="outline-steel"
|
|
display="flex"
|
|
center
|
|
overflow="hidden"
|
|
>
|
|
{logoUrl ? (
|
|
<Image src={logoUrl} alt={name} width={128} height={128} />
|
|
) : (
|
|
<Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
|
|
)}
|
|
</Box>
|
|
|
|
<Box flex="1">
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Heading level={1} weight="bold">{name}</Heading>
|
|
{tag && (
|
|
<Box px={2} py={1} bg="base-black" border borderColor="outline-steel">
|
|
<Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
|
|
<Text color="text-gray-400" mt={2} block maxWidth="2xl">
|
|
{description || 'No mission statement provided.'}
|
|
</Text>
|
|
|
|
<Stack direction="row" gap={6} mt={6}>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
|
|
<Text block weight="bold" color="text-white">{memberCount} Units</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
|
|
<Text block weight="bold" color="text-white">
|
|
{foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack gap={3}>
|
|
{isAdmin && (
|
|
<Button variant="secondary" size="sm" onClick={onAdminClick}>
|
|
Configure
|
|
</Button>
|
|
)}
|
|
<Button variant="primary" size="sm">
|
|
Join Request
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|