81 lines
2.0 KiB
TypeScript
81 lines
2.0 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';
|
|
|
|
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 (
|
|
<TeamHero
|
|
title={
|
|
<div className="flex items-center gap-3">
|
|
{name}
|
|
{tag && <Badge variant="outline">[{tag}]</Badge>}
|
|
</div>
|
|
}
|
|
description={description || 'No mission statement provided.'}
|
|
sideContent={
|
|
<div className="w-32 h-32 bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-default)] flex items-center justify-center overflow-hidden rounded-lg">
|
|
{logoUrl ? (
|
|
<Image src={logoUrl} alt={name} width={128} height={128} />
|
|
) : (
|
|
<Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
|
|
)}
|
|
</div>
|
|
}
|
|
stats={
|
|
<StatGrid
|
|
columns={2}
|
|
variant="box"
|
|
stats={[
|
|
{
|
|
label: 'Personnel',
|
|
value: `${memberCount} Units`,
|
|
},
|
|
{
|
|
label: 'Established',
|
|
value: foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown',
|
|
}
|
|
]}
|
|
/>
|
|
}
|
|
actions={
|
|
<>
|
|
{isAdmin && (
|
|
<Button variant="secondary" onClick={onAdminClick}>
|
|
Configure
|
|
</Button>
|
|
)}
|
|
<Button variant="primary">
|
|
Join Request
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|