website refactor
This commit is contained in:
@@ -28,69 +28,7 @@ import Card from '@/components/ui/Card';
|
||||
|
||||
import { getCountryFlag } from '@/lib/utilities/country';
|
||||
import { getGreeting } from '@/lib/utilities/time';
|
||||
|
||||
interface DashboardViewData {
|
||||
currentDriver: {
|
||||
name: string;
|
||||
avatarUrl: string;
|
||||
country: string;
|
||||
rating: string;
|
||||
rank: string;
|
||||
totalRaces: string;
|
||||
wins: string;
|
||||
podiums: string;
|
||||
consistency: string;
|
||||
};
|
||||
nextRace: {
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string;
|
||||
formattedDate: string;
|
||||
formattedTime: string;
|
||||
timeUntil: string;
|
||||
isMyLeague: boolean;
|
||||
} | null;
|
||||
upcomingRaces: Array<{
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string;
|
||||
formattedDate: string;
|
||||
formattedTime: string;
|
||||
timeUntil: string;
|
||||
isMyLeague: boolean;
|
||||
}>;
|
||||
leagueStandings: Array<{
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
position: string;
|
||||
points: string;
|
||||
totalDrivers: string;
|
||||
}>;
|
||||
feedItems: Array<{
|
||||
id: string;
|
||||
type: string;
|
||||
headline: string;
|
||||
body?: string;
|
||||
timestamp: string;
|
||||
formattedTime: string;
|
||||
ctaHref?: string;
|
||||
ctaLabel?: string;
|
||||
}>;
|
||||
friends: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl: string;
|
||||
country: string;
|
||||
}>;
|
||||
activeLeaguesCount: string;
|
||||
friendCount: string;
|
||||
hasUpcomingRaces: boolean;
|
||||
hasLeagueStandings: boolean;
|
||||
hasFeedItems: boolean;
|
||||
hasFriends: boolean;
|
||||
}
|
||||
import type { DashboardViewData } from './DashboardViewData';
|
||||
|
||||
interface DashboardTemplateProps {
|
||||
data: DashboardViewData;
|
||||
@@ -205,7 +143,7 @@ export function DashboardTemplate({ data }: DashboardTemplateProps) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">{nextRace.track}</h2>
|
||||
@@ -221,7 +159,7 @@ export function DashboardTemplate({ data }: DashboardTemplateProps) {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col items-end gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Starts in</p>
|
||||
@@ -367,4 +305,4 @@ export function DashboardTemplate({ data }: DashboardTemplateProps) {
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,9 +43,9 @@ export function LeagueRulebookTemplate({
|
||||
}
|
||||
|
||||
const primaryChampionship = viewModel.scoringConfig.championships.find(c => c.type === 'driver') ?? viewModel.scoringConfig.championships[0];
|
||||
const positionPoints = primaryChampionship?.pointsPreview
|
||||
.filter(p => (p as any).sessionType === primaryChampionship.sessionTypes[0])
|
||||
.map(p => ({ position: Number((p as any).position), points: Number((p as any).points) }))
|
||||
const positionPoints: { position: number; points: number }[] = primaryChampionship?.pointsPreview
|
||||
.filter((p): p is { sessionType: string; position: number; points: number } => p.sessionType === primaryChampionship.sessionTypes[0])
|
||||
.map(p => ({ position: p.position, points: p.points }))
|
||||
.sort((a, b) => a.position - b.position) || [];
|
||||
|
||||
const sections: { id: RulebookSection; label: string }[] = [
|
||||
|
||||
@@ -6,9 +6,9 @@ import type { LeagueScheduleViewModel, LeagueScheduleRaceViewModel } from '@/lib
|
||||
import { StateContainer } from '@/components/shared/state/StateContainer';
|
||||
import { EmptyState } from '@/components/shared/state/EmptyState';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { useRegisterForRace } from '@/hooks/race/useRegisterForRace';
|
||||
import { useWithdrawFromRace } from '@/hooks/race/useWithdrawFromRace';
|
||||
import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
|
||||
import { useRegisterForRace } from "@/lib/hooks/race/useRegisterForRace";
|
||||
import { useWithdrawFromRace } from "@/lib/hooks/race/useWithdrawFromRace";
|
||||
import Card from '@/components/ui/Card';
|
||||
|
||||
// ============================================================================
|
||||
|
||||
109
apps/website/templates/ProfileLeaguesTemplate.tsx
Normal file
109
apps/website/templates/ProfileLeaguesTemplate.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import type { ProfileLeaguesViewData } from './ProfileLeaguesViewData';
|
||||
|
||||
interface ProfileLeaguesTemplateProps {
|
||||
viewData: ProfileLeaguesViewData;
|
||||
}
|
||||
|
||||
export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Manage leagues</h1>
|
||||
<p className="text-gray-400 text-sm">
|
||||
View leagues you own and participate in, and jump into league admin tools.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Leagues You Own */}
|
||||
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold text-white">Leagues you own</h2>
|
||||
{viewData.ownedLeagues.length > 0 && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{viewData.ownedLeagues.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">
|
||||
You don't own any leagues yet in this session.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{viewData.ownedLeagues.map((league) => (
|
||||
<div
|
||||
key={league.leagueId}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{league.name}</h3>
|
||||
<p className="text-xs text-gray-400 mt-1 line-clamp-2">
|
||||
{league.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href={`/leagues/${league.leagueId}`}
|
||||
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
|
||||
>
|
||||
View
|
||||
</a>
|
||||
<a href={`/leagues/${league.leagueId}?tab=admin`}>
|
||||
<button className="bg-primary hover:bg-primary/90 text-white text-xs px-3 py-1.5 rounded transition-colors">
|
||||
Manage
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Leagues You're In */}
|
||||
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
|
||||
{viewData.memberLeagues.length > 0 && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{viewData.memberLeagues.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">
|
||||
You're not a member of any other leagues yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{viewData.memberLeagues.map((league) => (
|
||||
<div
|
||||
key={league.leagueId}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{league.name}</h3>
|
||||
<p className="text-xs text-gray-400 mt-1 line-clamp-2">
|
||||
{league.description}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Your role:{' '}
|
||||
{league.membershipRole.charAt(0).toUpperCase() + league.membershipRole.slice(1)}
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={`/leagues/${league.leagueId}`}
|
||||
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
|
||||
>
|
||||
View league
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -757,12 +757,12 @@ export function RaceDetailTemplate({
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div className="p-3 rounded-lg bg-deep-graphite">
|
||||
<p className="text-xs text-gray-500 mb-1">Max Drivers</p>
|
||||
<p className="text-white font-medium">{(league.settings as any).maxDrivers ?? 32}</p>
|
||||
<p className="text-white font-medium">{league.settings.maxDrivers ?? 32}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-deep-graphite">
|
||||
<p className="text-xs text-gray-500 mb-1">Format</p>
|
||||
<p className="text-white font-medium capitalize">
|
||||
{(league.settings as any).qualifyingFormat ?? 'Open'}
|
||||
{league.settings.qualifyingFormat ?? 'Open'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,17 +5,15 @@ import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } fr
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Image from 'next/image';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import JoinTeamButton from '@/components/teams/JoinTeamButton';
|
||||
import TeamAdmin from '@/components/teams/TeamAdmin';
|
||||
import TeamRoster from '@/components/teams/TeamRoster';
|
||||
import TeamStandings from '@/components/teams/TeamStandings';
|
||||
import StatItem from '@/components/teams/StatItem';
|
||||
import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
|
||||
import type { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
import PlaceholderImage from '@/components/ui/PlaceholderImage';
|
||||
import type { TeamDetailViewData, TeamDetailData, TeamMemberData } from './TeamDetailViewData';
|
||||
|
||||
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
|
||||
|
||||
@@ -25,8 +23,8 @@ type Tab = 'overview' | 'roster' | 'standings' | 'admin';
|
||||
|
||||
export interface TeamDetailTemplateProps {
|
||||
// Data props
|
||||
team: TeamDetailsViewModel | null;
|
||||
memberships: TeamMemberViewModel[];
|
||||
team: TeamDetailData | null;
|
||||
memberships: TeamMemberData[];
|
||||
activeTab: Tab;
|
||||
loading: boolean;
|
||||
isAdmin: boolean;
|
||||
@@ -264,4 +262,4 @@ export default function TeamDetailTemplate({
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,346 +1,102 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
Users,
|
||||
Trophy,
|
||||
Search,
|
||||
Plus,
|
||||
Sparkles,
|
||||
Crown,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
Zap,
|
||||
UserPlus,
|
||||
ChevronRight,
|
||||
Timer,
|
||||
Target,
|
||||
Award,
|
||||
Handshake,
|
||||
MessageCircle,
|
||||
Calendar,
|
||||
} from 'lucide-react';
|
||||
import TeamCard from '@/components/teams/TeamCard';
|
||||
import { Users, Trophy, Target } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import CreateTeamForm from '@/components/teams/CreateTeamForm';
|
||||
import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
|
||||
import SkillLevelSection from '@/components/teams/SkillLevelSection';
|
||||
import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
|
||||
import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
|
||||
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
||||
import type { TeamsViewData, TeamSummaryData } from './view-data/TeamsViewData';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
type TeamDisplayData = TeamSummaryViewModel;
|
||||
|
||||
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
||||
|
||||
// ============================================================================
|
||||
// SKILL LEVEL CONFIG
|
||||
// ============================================================================
|
||||
|
||||
const SKILL_LEVELS: {
|
||||
id: SkillLevel;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
borderColor: string;
|
||||
description: string;
|
||||
}[] = [
|
||||
{
|
||||
id: 'pro',
|
||||
label: 'Pro',
|
||||
icon: Crown,
|
||||
color: 'text-yellow-400',
|
||||
bgColor: 'bg-yellow-400/10',
|
||||
borderColor: 'border-yellow-400/30',
|
||||
description: 'Elite competition, sponsored teams',
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
label: 'Advanced',
|
||||
icon: Star,
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-400/10',
|
||||
borderColor: 'border-purple-400/30',
|
||||
description: 'Competitive racing, high consistency',
|
||||
},
|
||||
{
|
||||
id: 'intermediate',
|
||||
label: 'Intermediate',
|
||||
icon: TrendingUp,
|
||||
color: 'text-primary-blue',
|
||||
bgColor: 'bg-primary-blue/10',
|
||||
borderColor: 'border-primary-blue/30',
|
||||
description: 'Growing skills, regular practice',
|
||||
},
|
||||
{
|
||||
id: 'beginner',
|
||||
label: 'Beginner',
|
||||
icon: Shield,
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-400/10',
|
||||
borderColor: 'border-green-400/30',
|
||||
description: 'Learning the basics, friendly environment',
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// TEMPLATE PROPS
|
||||
// ============================================================================
|
||||
|
||||
export interface TeamsTemplateProps {
|
||||
// Data props
|
||||
teams: TeamDisplayData[];
|
||||
isLoading?: boolean;
|
||||
|
||||
// UI state props
|
||||
searchQuery: string;
|
||||
showCreateForm: boolean;
|
||||
|
||||
// Derived data props
|
||||
teamsByLevel: Record<string, TeamDisplayData[]>;
|
||||
topTeams: TeamDisplayData[];
|
||||
recruitingCount: number;
|
||||
filteredTeams: TeamDisplayData[];
|
||||
|
||||
// Event handlers
|
||||
onSearchChange: (query: string) => void;
|
||||
onShowCreateForm: () => void;
|
||||
onHideCreateForm: () => void;
|
||||
onTeamClick: (teamId: string) => void;
|
||||
onCreateSuccess: (teamId: string) => void;
|
||||
onBrowseTeams: () => void;
|
||||
onSkillLevelClick: (level: SkillLevel) => void;
|
||||
interface TeamsTemplateProps extends TeamsViewData {
|
||||
searchQuery?: string;
|
||||
showCreateForm?: boolean;
|
||||
onSearchChange?: (query: string) => void;
|
||||
onShowCreateForm?: () => void;
|
||||
onHideCreateForm?: () => void;
|
||||
onTeamClick?: (teamId: string) => void;
|
||||
onCreateSuccess?: (teamId: string) => void;
|
||||
onBrowseTeams?: () => void;
|
||||
onSkillLevelClick?: (level: string) => void;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MAIN TEMPLATE COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
export default function TeamsTemplate({
|
||||
teams,
|
||||
isLoading = false,
|
||||
searchQuery,
|
||||
showCreateForm,
|
||||
teamsByLevel,
|
||||
topTeams,
|
||||
recruitingCount,
|
||||
filteredTeams,
|
||||
onSearchChange,
|
||||
onShowCreateForm,
|
||||
onHideCreateForm,
|
||||
onTeamClick,
|
||||
onCreateSuccess,
|
||||
onBrowseTeams,
|
||||
onSkillLevelClick,
|
||||
}: TeamsTemplateProps) {
|
||||
// Show create form view
|
||||
if (showCreateForm) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="mb-6">
|
||||
<Button variant="secondary" onClick={onHideCreateForm}>
|
||||
← Back to Teams
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
|
||||
<CreateTeamForm onCancel={onHideCreateForm} onSuccess={onCreateSuccess} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
|
||||
<p className="text-gray-400">Loading teams...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TeamsTemplate({ teams, searchQuery, onSearchChange, onShowCreateForm, onTeamClick }: TeamsTemplateProps) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12">
|
||||
{/* Hero Section - Different from Leagues */}
|
||||
<div className="relative mb-10 overflow-hidden">
|
||||
{/* Main Hero Card */}
|
||||
<div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
|
||||
<main className="min-h-screen bg-deep-graphite py-8">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Teams</h1>
|
||||
<p className="text-gray-400">Browse and manage your racing teams</p>
|
||||
</div>
|
||||
<Link href="/teams/create">
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
|
||||
<div className="max-w-xl">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
Team Racing
|
||||
</div>
|
||||
|
||||
<Heading level={1} className="text-4xl lg:text-5xl mb-4">
|
||||
Find Your
|
||||
<span className="text-purple-400"> Crew</span>
|
||||
</Heading>
|
||||
|
||||
<p className="text-gray-400 text-lg leading-relaxed mb-6">
|
||||
Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
|
||||
</p>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="flex flex-wrap gap-4 mb-6">
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<Users className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-white font-semibold">{teams.length}</span>
|
||||
<span className="text-gray-500 text-sm">Teams</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<UserPlus className="w-4 h-4 text-performance-green" />
|
||||
<span className="text-white font-semibold">{recruitingCount}</span>
|
||||
<span className="text-gray-500 text-sm">Recruiting</span>
|
||||
{/* Teams Grid */}
|
||||
{teams.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{teams.map((team: TeamSummaryData) => (
|
||||
<Card key={team.teamId} className="hover:border-primary-blue/50 transition-colors">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{team.logoUrl ? (
|
||||
<img
|
||||
src={team.logoUrl}
|
||||
alt={team.teamName}
|
||||
className="w-12 h-12 rounded-lg object-cover bg-iron-gray"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg bg-iron-gray flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">{team.teamName}</h3>
|
||||
<p className="text-sm text-gray-400">{team.leagueName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onShowCreateForm}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Create Team
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onBrowseTeams}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
Browse Teams
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400 mb-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
{team.memberCount} members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Skill Level Quick Nav */}
|
||||
<div className="lg:w-72">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
|
||||
<div className="space-y-2">
|
||||
{SKILL_LEVELS.map((level) => {
|
||||
const LevelIcon = level.icon;
|
||||
const count = teamsByLevel[level.id]?.length || 0;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={level.id}
|
||||
type="button"
|
||||
onClick={() => onSkillLevelClick(level.id)}
|
||||
className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<LevelIcon className={`w-4 h-4 ${level.color}`} />
|
||||
<span className="text-white font-medium">{level.label}</span>
|
||||
</div>
|
||||
<span className="text-gray-400 text-sm">{count} teams</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<div className="flex gap-2">
|
||||
<Link href={`/teams/${team.teamId}`} className="flex-1">
|
||||
<Button variant="secondary" className="w-full text-sm">
|
||||
View Team
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16">
|
||||
<Users className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-white mb-2">No teams yet</h3>
|
||||
<p className="text-gray-400 mb-4">Get started by creating your first racing team</p>
|
||||
<Link href="/teams/create">
|
||||
<Button variant="primary">Create Team</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team Leaderboard Preview */}
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
|
||||
<Trophy className="w-6 h-6 text-yellow-400" />
|
||||
Top Teams
|
||||
</h2>
|
||||
<TeamLeaderboardPreview topTeams={[]} onTeamClick={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter Bar - Same style as Leagues */}
|
||||
<div id="teams-list" className="mb-6 scroll-mt-8">
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Search */}
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search teams by name, description, region, or language..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why Join Section */}
|
||||
{!searchQuery && <WhyJoinTeamSection />}
|
||||
|
||||
{/* Team Leaderboard Preview */}
|
||||
{!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={onTeamClick} />}
|
||||
|
||||
{/* Featured Recruiting */}
|
||||
{!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={onTeamClick} />}
|
||||
|
||||
{/* Teams by Skill Level */}
|
||||
{teams.length === 0 ? (
|
||||
<Card className="text-center py-16">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
|
||||
<Users className="w-8 h-8 text-purple-400" />
|
||||
</div>
|
||||
<Heading level={2} className="text-2xl mb-3">
|
||||
No teams yet
|
||||
</Heading>
|
||||
<p className="text-gray-400 mb-8">
|
||||
Be the first to create a racing team. Gather drivers and compete together in endurance events.
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onShowCreateForm}
|
||||
className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
|
||||
>
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Create Your First Team
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : filteredTeams.length === 0 ? (
|
||||
<Card className="text-center py-12">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Search className="w-10 h-10 text-gray-600" />
|
||||
<p className="text-gray-400">No teams found matching "{searchQuery}"</p>
|
||||
<Button variant="secondary" onClick={() => onSearchChange('')}>
|
||||
Clear search
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<div>
|
||||
{SKILL_LEVELS.map((level, index) => (
|
||||
<div key={level.id} id={`level-${level.id}`} className="scroll-mt-8">
|
||||
<SkillLevelSection
|
||||
level={level}
|
||||
teams={teamsByLevel[level.id] ?? []}
|
||||
onTeamClick={onTeamClick}
|
||||
defaultExpanded={index === 0}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
70
apps/website/templates/view-data/DashboardViewData.ts
Normal file
70
apps/website/templates/view-data/DashboardViewData.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Dashboard ViewData
|
||||
*
|
||||
* SSR-safe data structure that can be built directly from DTO
|
||||
* without ViewModel instantiation. Contains formatted values
|
||||
* for display and ISO string timestamps for JSON serialization.
|
||||
*/
|
||||
|
||||
export interface DashboardViewData {
|
||||
currentDriver: {
|
||||
name: string;
|
||||
avatarUrl: string;
|
||||
country: string;
|
||||
rating: string;
|
||||
rank: string;
|
||||
totalRaces: string;
|
||||
wins: string;
|
||||
podiums: string;
|
||||
consistency: string;
|
||||
};
|
||||
nextRace: {
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string; // ISO string
|
||||
formattedDate: string;
|
||||
formattedTime: string;
|
||||
timeUntil: string;
|
||||
isMyLeague: boolean;
|
||||
} | null;
|
||||
upcomingRaces: Array<{
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string; // ISO string
|
||||
formattedDate: string;
|
||||
formattedTime: string;
|
||||
timeUntil: string;
|
||||
isMyLeague: boolean;
|
||||
}>;
|
||||
leagueStandings: Array<{
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
position: string;
|
||||
points: string;
|
||||
totalDrivers: string;
|
||||
}>;
|
||||
feedItems: Array<{
|
||||
id: string;
|
||||
type: string;
|
||||
headline: string;
|
||||
body?: string;
|
||||
timestamp: string; // ISO string
|
||||
formattedTime: string;
|
||||
ctaHref?: string;
|
||||
ctaLabel?: string;
|
||||
}>;
|
||||
friends: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl: string;
|
||||
country: string;
|
||||
}>;
|
||||
activeLeaguesCount: string;
|
||||
friendCount: string;
|
||||
hasUpcomingRaces: boolean;
|
||||
hasLeagueStandings: boolean;
|
||||
hasFeedItems: boolean;
|
||||
hasFriends: boolean;
|
||||
}
|
||||
16
apps/website/templates/view-data/ProfileLeaguesViewData.ts
Normal file
16
apps/website/templates/view-data/ProfileLeaguesViewData.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* ViewData for Profile Leagues page
|
||||
* Pure, JSON-serializable data structure for Template rendering
|
||||
*/
|
||||
|
||||
export interface ProfileLeaguesLeagueViewData {
|
||||
leagueId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
membershipRole: 'owner' | 'admin' | 'steward' | 'member';
|
||||
}
|
||||
|
||||
export interface ProfileLeaguesViewData {
|
||||
ownedLeagues: ProfileLeaguesLeagueViewData[];
|
||||
memberLeagues: ProfileLeaguesLeagueViewData[];
|
||||
}
|
||||
40
apps/website/templates/view-data/TeamDetailViewData.ts
Normal file
40
apps/website/templates/view-data/TeamDetailViewData.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* TeamDetailViewData - Pure ViewData for TeamDetailTemplate
|
||||
* Contains only raw serializable data, no methods or computed properties
|
||||
*/
|
||||
|
||||
export interface TeamDetailData {
|
||||
id: string;
|
||||
name: string;
|
||||
tag: string;
|
||||
description?: string;
|
||||
ownerId: string;
|
||||
leagues: string[];
|
||||
createdAt?: string;
|
||||
specialization?: string;
|
||||
region?: string;
|
||||
languages?: string[];
|
||||
category?: string;
|
||||
membership?: {
|
||||
role: string;
|
||||
joinedAt: string;
|
||||
isActive: boolean;
|
||||
} | null;
|
||||
canManage: boolean;
|
||||
}
|
||||
|
||||
export interface TeamMemberData {
|
||||
driverId: string;
|
||||
driverName: string;
|
||||
role: 'owner' | 'manager' | 'member';
|
||||
joinedAt: string;
|
||||
isActive: boolean;
|
||||
avatarUrl: string;
|
||||
}
|
||||
|
||||
export interface TeamDetailViewData {
|
||||
team: TeamDetailData;
|
||||
memberships: TeamMemberData[];
|
||||
currentDriverId: string;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
16
apps/website/templates/view-data/TeamsViewData.ts
Normal file
16
apps/website/templates/view-data/TeamsViewData.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* TeamsViewData - Pure ViewData for TeamsTemplate
|
||||
* Contains only raw serializable data, no methods or computed properties
|
||||
*/
|
||||
|
||||
export interface TeamSummaryData {
|
||||
teamId: string;
|
||||
teamName: string;
|
||||
leagueName: string;
|
||||
memberCount: number;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export interface TeamsViewData {
|
||||
teams: TeamSummaryData[];
|
||||
}
|
||||
Reference in New Issue
Block a user