mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-12 19:24:59 +01:00
parent 1f0c4f7fa6
commit 5ea95eaf51
54 changed files with 2894 additions and 2342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
apps/website/templates/TeamDetailTemplate.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
import SponsorInsightsCard, { SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import Image from 'next/image';
@@ -13,7 +13,7 @@ import TeamStandings from '@/components/teams/TeamStandings';
import StatItem from '@/components/teams/StatItem';
import { getMediaUrl } from '@/lib/utilities/media';
import PlaceholderImage from '@/components/ui/PlaceholderImage';
import type { TeamDetailViewData, TeamDetailData, TeamMemberData } from './TeamDetailViewData';
import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -22,12 +22,9 @@ type Tab = 'overview' | 'roster' | 'standings' | 'admin';
// ============================================================================
export interface TeamDetailTemplateProps {
// Data props
team: TeamDetailData | null;
memberships: TeamMemberData[];
viewData: TeamDetailViewData;
activeTab: Tab;
loading: boolean;
isAdmin: boolean;
// Event handlers
onTabChange: (tab: Tab) => void;
@@ -41,12 +38,10 @@ export interface TeamDetailTemplateProps {
// MAIN TEMPLATE COMPONENT
// ============================================================================
export default function TeamDetailTemplate({
team,
memberships,
export function TeamDetailTemplate({
viewData,
activeTab,
loading,
isAdmin,
onTabChange,
onUpdate,
onRemoveMember,
@@ -65,7 +60,7 @@ export default function TeamDetailTemplate({
}
// Show not found state
if (!team) {
if (!viewData.team) {
return (
<div className="max-w-6xl mx-auto">
<Card>
@@ -87,20 +82,11 @@ export default function TeamDetailTemplate({
{ id: 'overview', label: 'Overview', visible: true },
{ id: 'roster', label: 'Roster', visible: true },
{ id: 'standings', label: 'Standings', visible: true },
{ id: 'admin', label: 'Admin', visible: isAdmin },
{ id: 'admin', label: 'Admin', visible: viewData.isAdmin },
];
const visibleTabs = tabs.filter(tab => tab.visible);
// Build sponsor insights for team using real membership and league data
const leagueCount = team.leagues?.length ?? 0;
const teamMetrics = [
MetricBuilders.members(memberships.length),
MetricBuilders.reach(memberships.length * 15),
MetricBuilders.races(leagueCount),
MetricBuilders.engagement(82),
];
return (
<div className="max-w-6xl mx-auto">
{/* Breadcrumb */}
@@ -108,18 +94,18 @@ export default function TeamDetailTemplate({
items={[
{ label: 'Home', href: '/' },
{ label: 'Teams', href: '/teams' },
{ label: team.name }
{ label: viewData.team.name }
]}
/>
{/* Sponsor Insights Card - Consistent placement at top */}
{isSponsorMode && team && (
{isSponsorMode && viewData.team && (
<SponsorInsightsCard
entityType="team"
entityId={team.id}
entityName={team.name}
entityId={viewData.team.id}
entityName={viewData.team.name}
tier="standard"
metrics={teamMetrics}
metrics={viewData.teamMetrics}
slots={SlotTemplates.team(true, true, 500, 250)}
trustScore={90}
monthlyActivity={85}
@@ -131,8 +117,8 @@ export default function TeamDetailTemplate({
<div className="flex items-start gap-6">
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
<Image
src={getMediaUrl('team-logo', team.id)}
alt={team.name}
src={getMediaUrl('team-logo', viewData.team.id)}
alt={viewData.team.name}
width={96}
height={96}
className="w-full h-full object-cover"
@@ -141,39 +127,39 @@ export default function TeamDetailTemplate({
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-3xl font-bold text-white">{team.name}</h1>
{team.tag && (
<h1 className="text-3xl font-bold text-white">{viewData.team.name}</h1>
{viewData.team.tag && (
<span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
[{team.tag}]
[{viewData.team.tag}]
</span>
)}
</div>
<p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
<p className="text-gray-300 mb-4 max-w-2xl">{viewData.team.description}</p>
<div className="flex items-center gap-4 text-sm text-gray-400">
<span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
{team.category && (
<span>{viewData.memberships.length} {viewData.memberships.length === 1 ? 'member' : 'members'}</span>
{viewData.team.category && (
<span className="flex items-center gap-1 text-purple-400">
<span className="w-2 h-2 rounded-full bg-purple-400"></span>
{team.category}
{viewData.team.category}
</span>
)}
{team.createdAt && (
{viewData.team.createdAt && (
<span>
Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
Founded {new Date(viewData.team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
</span>
)}
{leagueCount > 0 && (
{viewData.team.leagues && viewData.team.leagues.length > 0 && (
<span>
Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
Active in {viewData.team.leagues.length} {viewData.team.leagues.length === 1 ? 'league' : 'leagues'}
</span>
)}
</div>
</div>
</div>
<JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
<JoinTeamButton teamId={viewData.team.id} onUpdate={onUpdate} />
</div>
</Card>
@@ -185,8 +171,8 @@ export default function TeamDetailTemplate({
onClick={() => onTabChange(tab.id)}
className={`
px-4 py-3 font-medium transition-all relative
${activeTab === tab.id
? 'text-primary-blue'
${activeTab === tab.id
? 'text-primary-blue'
: 'text-gray-400 hover:text-white'
}
`}
@@ -206,23 +192,23 @@ export default function TeamDetailTemplate({
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<Card className="lg:col-span-2">
<h3 className="text-xl font-semibold text-white mb-4">About</h3>
<p className="text-gray-300 leading-relaxed">{team.description}</p>
<p className="text-gray-300 leading-relaxed">{viewData.team.description}</p>
</Card>
<Card>
<h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
<div className="space-y-3">
<StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
{team.category && (
<StatItem label="Category" value={team.category} color="text-purple-400" />
<StatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
{viewData.team.category && (
<StatItem label="Category" value={viewData.team.category} color="text-purple-400" />
)}
{leagueCount > 0 && (
<StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
{viewData.team.leagues && viewData.team.leagues.length > 0 && (
<StatItem label="Leagues" value={viewData.team.leagues.length.toString()} color="text-green-400" />
)}
{team.createdAt && (
{viewData.team.createdAt && (
<StatItem
label="Founded"
value={new Date(team.createdAt).toLocaleDateString('en-US', {
value={new Date(viewData.team.createdAt).toLocaleDateString('en-US', {
month: 'short',
year: 'numeric',
})}
@@ -244,20 +230,20 @@ export default function TeamDetailTemplate({
{activeTab === 'roster' && (
<TeamRoster
teamId={team.id}
memberships={memberships}
isAdmin={isAdmin}
teamId={viewData.team.id}
memberships={viewData.memberships}
isAdmin={viewData.isAdmin}
onRemoveMember={onRemoveMember}
onChangeRole={onChangeRole}
/>
)}
{activeTab === 'standings' && (
<TeamStandings teamId={team.id} leagues={team.leagues} />
<TeamStandings teamId={viewData.team.id} leagues={viewData.team.leagues} />
)}
{activeTab === 'admin' && isAdmin && (
<TeamAdmin team={team} onUpdate={onUpdate} />
{activeTab === 'admin' && viewData.isAdmin && (
<TeamAdmin team={viewData.team} onUpdate={onUpdate} />
)}
</div>
</div>