98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Image } from '@/ui/Image';
|
|
import { TeamHero } from '@/ui/TeamHero';
|
|
import { Text } from '@/ui/Text';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { StatGrid } from '@/ui/StatGrid';
|
|
import { Group } from '@/ui/Group';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface TeamDetailsHeaderProps {
|
|
teamId: string;
|
|
name: string;
|
|
tag?: string;
|
|
description?: string;
|
|
logoUrl?: string;
|
|
memberCount: number;
|
|
memberCountLabel?: string;
|
|
foundedDate?: string;
|
|
foundedDateLabel?: string;
|
|
isAdmin?: boolean;
|
|
onAdminClick?: () => void;
|
|
}
|
|
|
|
export function TeamDetailsHeader({
|
|
name,
|
|
tag,
|
|
description,
|
|
logoUrl,
|
|
memberCount,
|
|
memberCountLabel,
|
|
foundedDate,
|
|
foundedDateLabel,
|
|
isAdmin,
|
|
onAdminClick,
|
|
}: TeamDetailsHeaderProps) {
|
|
return (
|
|
<TeamHero
|
|
title={
|
|
<Group gap={3}>
|
|
{name}
|
|
{tag && <Badge variant="outline">[{tag}]</Badge>}
|
|
</Group>
|
|
}
|
|
description={description || 'No mission statement provided.'}
|
|
sideContent={
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
width="8rem"
|
|
height="8rem"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
overflow="hidden"
|
|
border
|
|
>
|
|
{logoUrl ? (
|
|
<Image src={logoUrl} alt={name} width={128} height={128} />
|
|
) : (
|
|
<Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
|
|
)}
|
|
</Surface>
|
|
}
|
|
stats={
|
|
<StatGrid
|
|
columns={2}
|
|
variant="box"
|
|
stats={[
|
|
{
|
|
label: 'Personnel',
|
|
value: `${memberCount} Units`,
|
|
},
|
|
{
|
|
label: 'Established',
|
|
value: foundedDateLabel || 'Unknown',
|
|
}
|
|
]}
|
|
/>
|
|
}
|
|
actions={
|
|
<Group gap={3}>
|
|
{isAdmin && (
|
|
<Button variant="secondary" onClick={onAdminClick}>
|
|
Configure
|
|
</Button>
|
|
)}
|
|
<Button variant="primary">
|
|
Join Request
|
|
</Button>
|
|
</Group>
|
|
}
|
|
/>
|
|
);
|
|
}
|