website refactor
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
'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 React from 'react';
|
||||
import { Users, Calendar, Shield, Settings, Globe } from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
|
||||
interface TeamDetailsHeaderProps {
|
||||
teamId: string;
|
||||
name: string;
|
||||
@@ -17,81 +17,126 @@ interface TeamDetailsHeaderProps {
|
||||
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>
|
||||
}
|
||||
/>
|
||||
<Box marginBottom={12}>
|
||||
<Surface variant="precision" padding="none">
|
||||
<Box padding={10}>
|
||||
<Box display="flex" alignItems="start" gap={10} flexWrap="wrap">
|
||||
{/* Logo Container */}
|
||||
<Box
|
||||
width={48}
|
||||
height={48}
|
||||
rounded="xl"
|
||||
bg="var(--ui-color-bg-base)"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
overflow="hidden"
|
||||
border="1px solid var(--ui-color-border-muted)"
|
||||
flexShrink={0}
|
||||
shadow="xl"
|
||||
>
|
||||
{logoUrl ? (
|
||||
<Box as="img" src={logoUrl} alt={name} width="100%" height="100%" objectFit="cover" />
|
||||
) : (
|
||||
<Box display="flex" flexDirection="col" alignItems="center" gap="xs">
|
||||
<Icon icon={Users} size={12} intent="low" />
|
||||
<Text size="sm" variant="low" weight="bold" mono>{name.substring(0, 3).toUpperCase()}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Info Section */}
|
||||
<Box flex={1} minWidth="300px">
|
||||
<Stack gap="lg">
|
||||
<Box>
|
||||
<Box display="flex" alignItems="center" gap="md" flexWrap="wrap" marginBottom={4}>
|
||||
<Heading level={1} weight="bold" style={{ fontSize: '3rem' }}>{name}</Heading>
|
||||
{tag && (
|
||||
<Box paddingX={3} paddingY={1} bg="rgba(25, 140, 255, 0.1)" border="1px solid var(--ui-color-intent-primary)" rounded="md">
|
||||
<Text variant="primary" size="sm" weight="bold" mono>{tag}</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box maxWidth="800px">
|
||||
<Text variant="med" size="xl" leading="relaxed">
|
||||
{description || 'No mission statement provided.'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Metadata Grid */}
|
||||
<Box display="flex" gap={12} flexWrap="wrap" paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
|
||||
<Stack direction="row" align="center" gap="md">
|
||||
<Box width={12} height={12} rounded="lg" bg="rgba(25, 140, 255, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(25, 140, 255, 0.1)">
|
||||
<Icon icon={Users} size={5} intent="primary" />
|
||||
</Box>
|
||||
<Stack gap="none">
|
||||
<Box>
|
||||
<Text size="xs" variant="low" uppercase>Personnel</Text>
|
||||
</Box>
|
||||
<Text weight="bold" mono size="lg">{memberCount} UNITS</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" align="center" gap="md">
|
||||
<Box width={12} height={12} rounded="lg" bg="rgba(78, 212, 224, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(78, 212, 224, 0.1)">
|
||||
<Icon icon={Calendar} size={5} intent="telemetry" />
|
||||
</Box>
|
||||
<Stack gap="none">
|
||||
<Box>
|
||||
<Text size="xs" variant="low" uppercase>Established</Text>
|
||||
</Box>
|
||||
<Text weight="bold" mono size="lg">{foundedDateLabel || 'UNKNOWN'}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" align="center" gap="md">
|
||||
<Box width={12} height={12} rounded="lg" bg="rgba(255, 255, 255, 0.02)" display="flex" alignItems="center" justifyContent="center" border="1px solid var(--ui-color-border-muted)">
|
||||
<Icon icon={Globe} size={5} intent="low" />
|
||||
</Box>
|
||||
<Stack gap="none">
|
||||
<Box>
|
||||
<Text size="xs" variant="low" uppercase>Region</Text>
|
||||
</Box>
|
||||
<Text weight="bold" mono size="lg">GLOBAL</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Box>
|
||||
<Stack direction="row" gap="md">
|
||||
{isAdmin && (
|
||||
<Button variant="secondary" onClick={onAdminClick} icon={<Settings size={18} />}>
|
||||
Configure
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="primary" icon={<Shield size={18} />}>
|
||||
Join Request
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Surface>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user