- Interactive management features for approving requests and managing slots will be implemented in future updates.
-
-
+
+
+
+
+
+ Sponsorship Management
+
+ Interactive management features for approving requests and managing slots will be implemented in future updates.
+
+
+
-
-
+
+
);
-}
\ No newline at end of file
+}
diff --git a/apps/website/templates/LeagueStandingsTemplate.tsx b/apps/website/templates/LeagueStandingsTemplate.tsx
index aa3e70aa4..923259e10 100644
--- a/apps/website/templates/LeagueStandingsTemplate.tsx
+++ b/apps/website/templates/LeagueStandingsTemplate.tsx
@@ -1,14 +1,15 @@
'use client';
+import React from 'react';
import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
import { StandingsTable } from '@/components/leagues/StandingsTable';
-import Card from '@/components/ui/Card';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
-// ============================================================================
-// TYPES
-// ============================================================================
-
interface LeagueStandingsTemplateProps {
viewData: LeagueStandingsViewData;
onRemoveMember: (driverId: string) => void;
@@ -16,10 +17,6 @@ interface LeagueStandingsTemplateProps {
loading?: boolean;
}
-// ============================================================================
-// MAIN TEMPLATE COMPONENT
-// ============================================================================
-
export function LeagueStandingsTemplate({
viewData,
onRemoveMember,
@@ -28,29 +25,31 @@ export function LeagueStandingsTemplate({
}: LeagueStandingsTemplateProps) {
if (loading) {
return (
-
- Loading standings...
-
+
+ Loading standings...
+
);
}
return (
-
+
{/* Championship Stats */}
-
Championship Standings
-
+
+ Championship Standings
+
+
-
+
);
-}
\ No newline at end of file
+}
diff --git a/apps/website/templates/LeagueWalletTemplate.tsx b/apps/website/templates/LeagueWalletTemplate.tsx
index 52cd29843..6a478237f 100644
--- a/apps/website/templates/LeagueWalletTemplate.tsx
+++ b/apps/website/templates/LeagueWalletTemplate.tsx
@@ -1,155 +1,90 @@
-import { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
+'use client';
+
+import React from 'react';
import { Card } from '@/ui/Card';
-import { Section } from '@/ui/Section';
-import { Wallet, TrendingUp, TrendingDown, DollarSign, Calendar, ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+import { Wallet, Calendar } from 'lucide-react';
+import type { LeagueWalletViewData } from '@/lib/view-data/leagues/LeagueWalletViewData';
+import { TransactionRow } from '@/components/leagues/TransactionRow';
interface LeagueWalletTemplateProps {
viewData: LeagueWalletViewData;
}
export function LeagueWalletTemplate({ viewData }: LeagueWalletTemplateProps) {
- const formatCurrency = (amount: number) => {
- return new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: viewData.currency,
- }).format(Math.abs(amount));
- };
-
- const getTransactionIcon = (type: string) => {
- switch (type) {
- case 'deposit':
- return ;
- case 'withdrawal':
- return ;
- case 'sponsorship':
- return ;
- case 'prize':
- return ;
- default:
- return ;
- }
- };
-
- const getTransactionColor = (type: string) => {
- switch (type) {
- case 'deposit':
- return 'text-performance-green';
- case 'withdrawal':
- return 'text-red-400';
- case 'sponsorship':
- return 'text-primary-blue';
- case 'prize':
- return 'text-warning-amber';
- default:
- return 'text-gray-400';
- }
- };
-
return (
-
-
-
-
League Wallet
-
- Financial overview and transaction history
-
-
-
+
+
+ League Wallet
+
+ Financial overview and transaction history
+
+
-
+
{/* Balance Card */}
-
-
-
-
-
-
Current Balance
-
- {formatCurrency(viewData.balance)}
-
-
-
+
+
+
+
+
+ Current Balance
+
+ {viewData.formattedBalance}
+
+
+
{/* Transaction History */}
-
+ {viewData.memberLeagues.length === 0 ? (
+
+ You're not a member of any other leagues yet.
+
+ ) : (
+
+ {viewData.memberLeagues.map((league) => (
+
+ ))}
+
+ )}
+
+
+
+
);
}
diff --git a/apps/website/templates/ProfileTemplate.tsx b/apps/website/templates/ProfileTemplate.tsx
index 21a3294cc..c7f140641 100644
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -1,447 +1,232 @@
'use client';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Heading from '@/components/ui/Heading';
-import Image from 'next/image';
-import Link from 'next/link';
+import React from 'react';
+import CreateDriverForm from '@/components/drivers/CreateDriverForm';
+import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
+import ProfileSettings from '@/components/drivers/ProfileSettings';
+import { AchievementGrid } from '@/components/profile/AchievementGrid';
+import { ProfileHero } from '@/components/profile/ProfileHero';
+import { ProfileStatGrid } from '@/components/profile/ProfileStatGrid';
+import { ProfileTabs } from '@/components/profile/ProfileTabs';
+import { TeamMembershipGrid } from '@/components/profile/TeamMembershipGrid';
import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
import {
Activity,
Award,
- BarChart3,
- Calendar,
- ChevronRight,
- Clock,
- Edit3,
- ExternalLink,
- Flag,
- Globe,
History,
- MessageCircle,
- Percent,
- Settings,
- Shield,
- Star,
- Target,
- TrendingUp,
- Trophy,
- Twitch,
- Twitter,
User,
- UserPlus,
- Users,
- Youtube,
- Zap,
- Medal,
- Crown,
} from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import ProfileSettings from '@/components/drivers/ProfileSettings';
-import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
-import CreateDriverForm from '@/components/drivers/CreateDriverForm';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
-type ProfileTab = 'overview' | 'history' | 'stats';
+export type ProfileTab = 'overview' | 'history' | 'stats';
interface ProfileTemplateProps {
- viewData: ProfileViewData | null;
+ viewData: ProfileViewData;
mode: 'profile-exists' | 'needs-profile';
+ activeTab: ProfileTab;
+ onTabChange: (tab: ProfileTab) => void;
+ editMode: boolean;
+ onEditModeChange: (edit: boolean) => void;
+ friendRequestSent: boolean;
+ onFriendRequestSend: () => void;
onSaveSettings: (updates: { bio?: string; country?: string }) => Promise;
}
-function getAchievementIcon(icon: NonNullable['achievements'][number]['icon']) {
- switch (icon) {
- case 'trophy':
- return Trophy;
- case 'medal':
- return Medal;
- case 'star':
- return Star;
- case 'crown':
- return Crown;
- case 'target':
- return Target;
- case 'zap':
- return Zap;
- }
-}
-
-function getSocialIcon(platformLabel: string) {
- switch (platformLabel) {
- case 'twitter':
- return Twitter;
- case 'youtube':
- return Youtube;
- case 'twitch':
- return Twitch;
- case 'discord':
- return MessageCircle;
- default:
- return Globe;
- }
-}
-
-export function ProfileTemplate({ viewData, mode, onSaveSettings }: ProfileTemplateProps) {
- const router = useRouter();
- const searchParams = useSearchParams();
- const tabParam = searchParams.get('tab') as ProfileTab | null;
-
- const [editMode, setEditMode] = useState(false);
- const [activeTab, setActiveTab] = useState(tabParam || 'overview');
- const [friendRequestSent, setFriendRequestSent] = useState(false);
-
- useEffect(() => {
- if (searchParams.get('tab') !== activeTab) {
- const params = new URLSearchParams(searchParams.toString());
- if (activeTab === 'overview') {
- params.delete('tab');
- } else {
- params.set('tab', activeTab);
- }
- const query = params.toString();
- router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
- }
- }, [activeTab, searchParams, router]);
-
- useEffect(() => {
- const tab = searchParams.get('tab') as ProfileTab | null;
- if (tab && tab !== activeTab) {
- setActiveTab(tab);
- }
- }, [searchParams]);
-
+export function ProfileTemplate({
+ viewData,
+ mode,
+ activeTab,
+ onTabChange,
+ editMode,
+ onEditModeChange,
+ friendRequestSent,
+ onFriendRequestSend,
+ onSaveSettings,
+}: ProfileTemplateProps) {
if (mode === 'needs-profile') {
return (
-
-
-
-
-
- Create Your Driver Profile
-
Join the GridPilot community and start your racing journey
-
+
+
+
+
+
+
+ Create Your Driver Profile
+ Join the GridPilot community and start your racing journey
+
+
-
-
-
Get Started
-
- Create your driver profile to join leagues, compete in races, and connect with other drivers.
-
-
-
-
-
- );
- }
-
- if (!viewData) {
- return (
-
-
-
-
Unable to load profile
-
-
+
+
+
+
+ Get Started
+
+ Create your driver profile to join leagues, compete in races, and connect with other drivers.
+
+
+
+
+
+
+
);
}
if (editMode) {
return (
-
-
+ {/* Filters (Simplified for template) */}
+
+
+
+ Use the search and filter options to find the perfect league for your brand.
+
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full px-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
+ />
+
+ {/* Selects would go here, using standard Select UI if available */}
+
+
- )}
- {/* Platform Fee Notice */}
-
-
-
-
-
Platform Fee
-
- A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorship payments. {siteConfig.fees.description}
-
-
-
-
-
+ {/* Results Count */}
+
+
+ Showing {filteredLeagues.length} of {viewData.leagues.length} leagues
+
+
+
+ }>
+ Browse Teams
+
+
+
+ }>
+ Browse Drivers
+
+
+
+
+
+ {/* League Grid */}
+ {filteredLeagues.length > 0 ? (
+
+ {filteredLeagues.map((league) => (
+
+
+
+ ))}
+
+ ) : (
+
+
+
+
+
+
+ No leagues found
+ Try adjusting your filters to see more results
+
+
+
+
+ )}
+
+ {/* Platform Fee Notice */}
+
+
+
+
+ Platform Fee
+
+ A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorship payments. {siteConfig.fees.description}
+
+
+
+
+
+
);
-}
\ No newline at end of file
+}
+
+function StatCard({ label, value, color = 'text-white' }: { label: string, value: string | number, color?: string }) {
+ return (
+
+
+ {value}
+ {label}
+
+
+ );
+}
diff --git a/apps/website/templates/SponsorshipRequestsTemplate.tsx b/apps/website/templates/SponsorshipRequestsTemplate.tsx
index f2ff61f79..8d8c7871f 100644
--- a/apps/website/templates/SponsorshipRequestsTemplate.tsx
+++ b/apps/website/templates/SponsorshipRequestsTemplate.tsx
@@ -1,8 +1,15 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
-import Card from '@/components/ui/Card';
-import Button from '@/components/ui/Button';
-import Container from '@/components/ui/Container';
-import Heading from '@/components/ui/Heading';
export interface SponsorshipRequestsTemplateProps {
viewData: SponsorshipRequestsViewData;
@@ -16,65 +23,72 @@ export function SponsorshipRequestsTemplate({
onReject,
}: SponsorshipRequestsTemplateProps) {
return (
-
-
-
- Sponsorship Requests
-
-
- Manage pending sponsorship requests for your profile.
-
- 
-