website refactor
This commit is contained in:
@@ -49,6 +49,8 @@ export function TeamDetailTemplate({
|
||||
}: TeamDetailTemplateProps) {
|
||||
const isSponsorMode = useSponsorMode();
|
||||
|
||||
const team = viewData.team;
|
||||
|
||||
// Show loading state
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -61,7 +63,7 @@ export function TeamDetailTemplate({
|
||||
}
|
||||
|
||||
// Show not found state
|
||||
if (!viewData.team) {
|
||||
if (!team) {
|
||||
return (
|
||||
<Container size="md" py={12}>
|
||||
<Card>
|
||||
@@ -69,7 +71,7 @@ export function TeamDetailTemplate({
|
||||
<Box textAlign="center">
|
||||
<Heading level={1}>Team Not Found</Heading>
|
||||
<Text color="text-gray-400" block mt={2}>
|
||||
The team you're looking for doesn't exist or has been disbanded.
|
||||
The team you're looking for doesn't exist or has been disbanded.
|
||||
</Text>
|
||||
</Box>
|
||||
<Button variant="primary" onClick={onGoBack}>
|
||||
@@ -81,15 +83,6 @@ export function TeamDetailTemplate({
|
||||
);
|
||||
}
|
||||
|
||||
const tabs: { id: Tab; label: string; visible: boolean }[] = [
|
||||
{ id: 'overview', label: 'Overview', visible: true },
|
||||
{ id: 'roster', label: 'Roster', visible: true },
|
||||
{ id: 'standings', label: 'Standings', visible: true },
|
||||
{ id: 'admin', label: 'Admin', visible: viewData.isAdmin },
|
||||
];
|
||||
|
||||
const visibleTabs = tabs.filter(tab => tab.visible);
|
||||
|
||||
return (
|
||||
<Container size="lg" py={8}>
|
||||
<Stack gap={6}>
|
||||
@@ -98,16 +91,16 @@ export function TeamDetailTemplate({
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: viewData.team.name }
|
||||
{ label: team.name }
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Sponsor Insights Card */}
|
||||
{isSponsorMode && viewData.team && (
|
||||
{isSponsorMode && team && (
|
||||
<SponsorInsightsCard
|
||||
entityType="team"
|
||||
entityId={viewData.team.id}
|
||||
entityName={viewData.team.name}
|
||||
entityId={team.id}
|
||||
entityName={team.name}
|
||||
tier="standard"
|
||||
metrics={viewData.teamMetrics}
|
||||
slots={SlotTemplates.team(true, true, 500, 250)}
|
||||
@@ -119,8 +112,8 @@ export function TeamDetailTemplate({
|
||||
|
||||
<TeamHero
|
||||
team={{
|
||||
...viewData.team,
|
||||
leagues: viewData.team.leagues.map(id => ({ id }))
|
||||
...team,
|
||||
leagues: team.leagues.map(id => ({ id }))
|
||||
}}
|
||||
memberCount={viewData.memberships.length}
|
||||
onUpdate={onUpdate}
|
||||
@@ -129,16 +122,20 @@ export function TeamDetailTemplate({
|
||||
{/* Tabs */}
|
||||
<Box borderBottom={true} borderColor="border-charcoal-outline">
|
||||
<Stack direction="row" gap={6}>
|
||||
{visibleTabs.map((tab) => (
|
||||
<Box
|
||||
key={tab.id}
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
pb={3}
|
||||
cursor="pointer"
|
||||
className={`transition-all ${activeTab === tab.id ? 'border-b-2 border-primary-blue text-primary-blue' : 'border-b-2 border-transparent text-gray-400'}`}
|
||||
>
|
||||
<Text weight="medium">{tab.label}</Text>
|
||||
</Box>
|
||||
{viewData.tabs.map((tab) => (
|
||||
tab.visible && (
|
||||
<Box
|
||||
key={tab.id}
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
pb={3}
|
||||
cursor="pointer"
|
||||
borderBottom={activeTab === tab.id ? '2px solid' : '2px solid'}
|
||||
borderColor={activeTab === tab.id ? 'border-primary-blue' : 'border-transparent'}
|
||||
color={activeTab === tab.id ? 'text-primary-blue' : 'text-gray-400'}
|
||||
>
|
||||
<Text weight="medium">{tab.label}</Text>
|
||||
</Box>
|
||||
)
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
@@ -152,7 +149,7 @@ export function TeamDetailTemplate({
|
||||
<Box mb={4}>
|
||||
<Heading level={2}>About</Heading>
|
||||
</Box>
|
||||
<Text color="text-gray-300" style={{ lineHeight: 1.625 }}>{viewData.team.description}</Text>
|
||||
<Text color="text-gray-300" leading="relaxed">{team.description}</Text>
|
||||
</Card>
|
||||
</GridItem>
|
||||
|
||||
@@ -163,16 +160,16 @@ export function TeamDetailTemplate({
|
||||
</Box>
|
||||
<Stack gap={3}>
|
||||
<HorizontalStatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
|
||||
{viewData.team.category && (
|
||||
<HorizontalStatItem label="Category" value={viewData.team.category} color="text-purple-400" />
|
||||
{team.category && (
|
||||
<HorizontalStatItem label="Category" value={team.category} color="text-purple-400" />
|
||||
)}
|
||||
{viewData.team.leagues && viewData.team.leagues.length > 0 && (
|
||||
<HorizontalStatItem label="Leagues" value={viewData.team.leagues.length.toString()} color="text-green-400" />
|
||||
{team.leagues && team.leagues.length > 0 && (
|
||||
<HorizontalStatItem label="Leagues" value={team.leagues.length.toString()} color="text-green-400" />
|
||||
)}
|
||||
{viewData.team.createdAt && (
|
||||
{team.createdAt && (
|
||||
<HorizontalStatItem
|
||||
label="Founded"
|
||||
value={new Date(viewData.team.createdAt).toLocaleDateString('en-US', {
|
||||
value={new Date(team.createdAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})}
|
||||
@@ -197,7 +194,7 @@ export function TeamDetailTemplate({
|
||||
|
||||
{activeTab === 'roster' && (
|
||||
<TeamRoster
|
||||
teamId={viewData.team.id}
|
||||
teamId={team.id}
|
||||
memberships={viewData.memberships}
|
||||
isAdmin={viewData.isAdmin}
|
||||
onRemoveMember={onRemoveMember}
|
||||
@@ -206,11 +203,11 @@ export function TeamDetailTemplate({
|
||||
)}
|
||||
|
||||
{activeTab === 'standings' && (
|
||||
<TeamStandings teamId={viewData.team.id} leagues={viewData.team.leagues} />
|
||||
<TeamStandings teamId={team.id} leagues={team.leagues} />
|
||||
)}
|
||||
|
||||
{activeTab === 'admin' && viewData.isAdmin && (
|
||||
<TeamAdmin team={viewData.team} onUpdate={onUpdate} />
|
||||
<TeamAdmin team={team} onUpdate={onUpdate} />
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user