1160 lines
45 KiB
TypeScript
1160 lines
45 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useRef, useEffect } from 'react';
|
||
import { Trophy, Award, Check, Zap, Settings, Globe, Medal, Plus, Minus, RotateCcw, HelpCircle, X } from 'lucide-react';
|
||
import { createPortal } from 'react-dom';
|
||
import type { LeagueScoringPresetDTO } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
|
||
import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
|
||
|
||
// ============================================================================
|
||
// INFO FLYOUT COMPONENT
|
||
// ============================================================================
|
||
|
||
interface InfoFlyoutProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
title: string;
|
||
children: React.ReactNode;
|
||
anchorRef: React.RefObject<HTMLElement | null>;
|
||
}
|
||
|
||
function InfoFlyout({ isOpen, onClose, title, children, anchorRef }: InfoFlyoutProps) {
|
||
const [position, setPosition] = useState({ top: 0, left: 0 });
|
||
const [mounted, setMounted] = useState(false);
|
||
const flyoutRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (isOpen && anchorRef.current && mounted) {
|
||
const rect = anchorRef.current.getBoundingClientRect();
|
||
const flyoutWidth = Math.min(380, window.innerWidth - 40);
|
||
const flyoutHeight = 450;
|
||
const padding = 16;
|
||
|
||
// Try to position to the right first
|
||
let left = rect.right + 12;
|
||
let top = rect.top;
|
||
|
||
// If goes off right edge, try left side
|
||
if (left + flyoutWidth > window.innerWidth - padding) {
|
||
left = rect.left - flyoutWidth - 12;
|
||
}
|
||
|
||
// If still off screen (left side), center horizontally
|
||
if (left < padding) {
|
||
left = Math.max(padding, (window.innerWidth - flyoutWidth) / 2);
|
||
}
|
||
|
||
// Vertical positioning - try to center on button, but stay in viewport
|
||
top = rect.top - flyoutHeight / 3;
|
||
|
||
// Adjust if goes off bottom edge
|
||
if (top + flyoutHeight > window.innerHeight - padding) {
|
||
top = window.innerHeight - flyoutHeight - padding;
|
||
}
|
||
|
||
// Ensure not above viewport
|
||
if (top < padding) top = padding;
|
||
|
||
// Final bounds check
|
||
left = Math.max(padding, Math.min(left, window.innerWidth - flyoutWidth - padding));
|
||
|
||
setPosition({ top, left });
|
||
}
|
||
}, [isOpen, anchorRef, mounted]);
|
||
|
||
useEffect(() => {
|
||
const handleEscape = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') onClose();
|
||
};
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (flyoutRef.current && !flyoutRef.current.contains(e.target as Node)) {
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
if (isOpen) {
|
||
document.addEventListener('keydown', handleEscape);
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
}
|
||
return () => {
|
||
document.removeEventListener('keydown', handleEscape);
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}, [isOpen, onClose]);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return createPortal(
|
||
<div
|
||
ref={flyoutRef}
|
||
className="fixed z-50 w-[380px] max-h-[80vh] overflow-y-auto bg-iron-gray border border-charcoal-outline rounded-xl shadow-2xl animate-fade-in"
|
||
style={{ top: position.top, left: position.left }}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-4 border-b border-charcoal-outline/50 sticky top-0 bg-iron-gray z-10">
|
||
<div className="flex items-center gap-2">
|
||
<HelpCircle className="w-4 h-4 text-primary-blue" />
|
||
<span className="text-sm font-semibold text-white">{title}</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="flex h-6 w-6 items-center justify-center rounded-md hover:bg-charcoal-outline transition-colors"
|
||
>
|
||
<X className="w-4 h-4 text-gray-400" />
|
||
</button>
|
||
</div>
|
||
{/* Content */}
|
||
<div className="p-4">
|
||
{children}
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
);
|
||
}
|
||
|
||
function InfoButton({ onClick, buttonRef }: { onClick: () => void; buttonRef: React.RefObject<HTMLButtonElement> }) {
|
||
return (
|
||
<button
|
||
ref={buttonRef}
|
||
type="button"
|
||
onClick={onClick}
|
||
className="flex h-5 w-5 items-center justify-center rounded-full text-gray-500 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors"
|
||
>
|
||
<HelpCircle className="w-3.5 h-3.5" />
|
||
</button>
|
||
);
|
||
}
|
||
|
||
// ============================================================================
|
||
// MOCKUP COMPONENTS FOR FLYOUTS
|
||
// ============================================================================
|
||
|
||
function PointsSystemMockup() {
|
||
const positions = [
|
||
{ pos: 1, pts: 25, color: 'bg-yellow-500' },
|
||
{ pos: 2, pts: 18, color: 'bg-gray-300' },
|
||
{ pos: 3, pts: 15, color: 'bg-amber-600' },
|
||
{ pos: 4, pts: 12, color: 'bg-charcoal-outline' },
|
||
{ pos: 5, pts: 10, color: 'bg-charcoal-outline' },
|
||
];
|
||
|
||
return (
|
||
<div className="bg-deep-graphite rounded-lg p-4 space-y-3">
|
||
<div className="flex items-center justify-between text-[10px] text-gray-500 uppercase tracking-wide px-1">
|
||
<span>Position</span>
|
||
<span>Points</span>
|
||
</div>
|
||
{positions.map((p) => (
|
||
<div key={p.pos} className="flex items-center gap-3">
|
||
<div className={`h-8 w-8 rounded-lg ${p.color} flex items-center justify-center text-sm font-bold ${p.pos <= 3 ? 'text-deep-graphite' : 'text-gray-400'}`}>
|
||
P{p.pos}
|
||
</div>
|
||
<div className="flex-1 h-2 bg-charcoal-outline/50 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-primary-blue to-neon-aqua rounded-full"
|
||
style={{ width: `${(p.pts / 25) * 100}%` }}
|
||
/>
|
||
</div>
|
||
<div className="w-8 text-right">
|
||
<span className="text-sm font-mono font-semibold text-white">{p.pts}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
<div className="flex items-center justify-center gap-1 pt-2 text-[10px] text-gray-500">
|
||
<span>...</span>
|
||
<span>down to P10 = 1 point</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BonusPointsMockup() {
|
||
const bonuses = [
|
||
{ emoji: '🏎️', label: 'Pole Position', pts: '+1', desc: 'Fastest in qualifying' },
|
||
{ emoji: '⚡', label: 'Fastest Lap', pts: '+1', desc: 'Best race lap time' },
|
||
{ emoji: '🥇', label: 'Led a Lap', pts: '+1', desc: 'Led at least one lap' },
|
||
];
|
||
|
||
return (
|
||
<div className="bg-deep-graphite rounded-lg p-4 space-y-2">
|
||
{bonuses.map((b, i) => (
|
||
<div key={i} className="flex items-center gap-3 p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline/30">
|
||
<span className="text-xl">{b.emoji}</span>
|
||
<div className="flex-1">
|
||
<div className="text-xs font-medium text-white">{b.label}</div>
|
||
<div className="text-[10px] text-gray-500">{b.desc}</div>
|
||
</div>
|
||
<span className="text-sm font-mono font-semibold text-performance-green">{b.pts}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ChampionshipMockup() {
|
||
const standings = [
|
||
{ pos: 1, name: 'M. Verstappen', pts: 575, delta: null },
|
||
{ pos: 2, name: 'L. Norris', pts: 412, delta: -163 },
|
||
{ pos: 3, name: 'C. Leclerc', pts: 389, delta: -186 },
|
||
];
|
||
|
||
return (
|
||
<div className="bg-deep-graphite rounded-lg p-4">
|
||
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-charcoal-outline/50">
|
||
<Trophy className="w-4 h-4 text-yellow-500" />
|
||
<span className="text-xs font-semibold text-white">Driver Championship</span>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{standings.map((s) => (
|
||
<div key={s.pos} className="flex items-center gap-2">
|
||
<div className={`h-6 w-6 rounded-full flex items-center justify-center text-[10px] font-bold ${
|
||
s.pos === 1 ? 'bg-yellow-500 text-deep-graphite' : 'bg-charcoal-outline text-gray-400'
|
||
}`}>
|
||
{s.pos}
|
||
</div>
|
||
<div className="flex-1 text-xs text-white truncate">{s.name}</div>
|
||
<div className="text-xs font-mono font-semibold text-white">{s.pts}</div>
|
||
{s.delta && (
|
||
<div className="text-[10px] font-mono text-gray-500">{s.delta}</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-3 pt-2 border-t border-charcoal-outline/50 text-[10px] text-gray-500 text-center">
|
||
Points accumulated across all races
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DropRulesMockup() {
|
||
const results = [
|
||
{ round: 'R1', pts: 25, dropped: false },
|
||
{ round: 'R2', pts: 18, dropped: false },
|
||
{ round: 'R3', pts: 4, dropped: true },
|
||
{ round: 'R4', pts: 15, dropped: false },
|
||
{ round: 'R5', pts: 12, dropped: false },
|
||
{ round: 'R6', pts: 0, dropped: true },
|
||
];
|
||
|
||
const total = results.filter(r => !r.dropped).reduce((sum, r) => sum + r.pts, 0);
|
||
const wouldBe = results.reduce((sum, r) => sum + r.pts, 0);
|
||
|
||
return (
|
||
<div className="bg-deep-graphite rounded-lg p-4">
|
||
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-charcoal-outline/50">
|
||
<span className="text-xs font-semibold text-white">Best 4 of 6 Results</span>
|
||
</div>
|
||
<div className="flex gap-1 mb-3">
|
||
{results.map((r, i) => (
|
||
<div
|
||
key={i}
|
||
className={`flex-1 p-2 rounded-lg text-center border transition-all ${
|
||
r.dropped
|
||
? 'bg-charcoal-outline/20 border-dashed border-charcoal-outline/50 opacity-50'
|
||
: 'bg-performance-green/10 border-performance-green/30'
|
||
}`}
|
||
>
|
||
<div className="text-[9px] text-gray-500">{r.round}</div>
|
||
<div className={`text-xs font-mono font-semibold ${r.dropped ? 'text-gray-500 line-through' : 'text-white'}`}>
|
||
{r.pts}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="flex justify-between items-center text-xs">
|
||
<span className="text-gray-500">Total counted:</span>
|
||
<span className="font-mono font-semibold text-performance-green">{total} pts</span>
|
||
</div>
|
||
<div className="flex justify-between items-center text-[10px] text-gray-500 mt-1">
|
||
<span>Without drops:</span>
|
||
<span className="font-mono">{wouldBe} pts</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface LeagueScoringSectionProps {
|
||
form: LeagueConfigFormModel;
|
||
presets: LeagueScoringPresetDTO[];
|
||
onChange?: (form: LeagueConfigFormModel) => void;
|
||
readOnly?: boolean;
|
||
/**
|
||
* When true, only render the scoring pattern panel.
|
||
*/
|
||
patternOnly?: boolean;
|
||
/**
|
||
* When true, only render the championships panel.
|
||
*/
|
||
championshipsOnly?: boolean;
|
||
}
|
||
|
||
interface ScoringPatternSectionProps {
|
||
scoring: LeagueConfigFormModel['scoring'];
|
||
presets: LeagueScoringPresetDTO[];
|
||
readOnly?: boolean;
|
||
patternError?: string;
|
||
onChangePatternId?: (patternId: string) => void;
|
||
onToggleCustomScoring?: () => void;
|
||
onUpdateCustomPoints?: (points: CustomPointsConfig) => void;
|
||
}
|
||
|
||
// Custom points configuration for inline editor
|
||
export interface CustomPointsConfig {
|
||
racePoints: number[];
|
||
poleBonusPoints: number;
|
||
fastestLapPoints: number;
|
||
leaderLapPoints: number;
|
||
}
|
||
|
||
const DEFAULT_CUSTOM_POINTS: CustomPointsConfig = {
|
||
racePoints: [25, 18, 15, 12, 10, 8, 6, 4, 2, 1],
|
||
poleBonusPoints: 1,
|
||
fastestLapPoints: 1,
|
||
leaderLapPoints: 0,
|
||
};
|
||
|
||
interface ChampionshipsSectionProps {
|
||
form: LeagueConfigFormModel;
|
||
onChange?: (form: LeagueConfigFormModel) => void;
|
||
readOnly?: boolean;
|
||
}
|
||
|
||
export function LeagueScoringSection({
|
||
form,
|
||
presets,
|
||
onChange,
|
||
readOnly,
|
||
patternOnly,
|
||
championshipsOnly,
|
||
}: LeagueScoringSectionProps) {
|
||
const disabled = readOnly || !onChange;
|
||
|
||
const handleSelectPreset = (presetId: string) => {
|
||
if (disabled || !onChange) return;
|
||
onChange({
|
||
...form,
|
||
scoring: {
|
||
...form.scoring,
|
||
patternId: presetId,
|
||
customScoringEnabled: false,
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleToggleCustomScoring = () => {
|
||
if (disabled || !onChange) return;
|
||
onChange({
|
||
...form,
|
||
scoring: {
|
||
...form.scoring,
|
||
customScoringEnabled: !form.scoring.customScoringEnabled,
|
||
},
|
||
});
|
||
};
|
||
|
||
const patternProps: ScoringPatternSectionProps = {
|
||
scoring: form.scoring,
|
||
presets,
|
||
readOnly: !!readOnly,
|
||
};
|
||
|
||
if (!readOnly && onChange) {
|
||
patternProps.onChangePatternId = handleSelectPreset;
|
||
}
|
||
|
||
if (!disabled) {
|
||
patternProps.onToggleCustomScoring = handleToggleCustomScoring;
|
||
}
|
||
|
||
const patternPanel = <ScoringPatternSection {...patternProps} />;
|
||
|
||
const championshipsProps: ChampionshipsSectionProps = {
|
||
form,
|
||
readOnly: !!readOnly,
|
||
};
|
||
|
||
if (onChange) {
|
||
championshipsProps.onChange = onChange;
|
||
}
|
||
|
||
const championshipsPanel = <ChampionshipsSection {...championshipsProps} />;
|
||
|
||
if (patternOnly) {
|
||
return <div>{patternPanel}</div>;
|
||
}
|
||
|
||
if (championshipsOnly) {
|
||
return <div>{championshipsPanel}</div>;
|
||
}
|
||
|
||
return (
|
||
<div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)]">
|
||
{patternPanel}
|
||
{championshipsPanel}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Step 4 – Super simple scoring preset picker.
|
||
* Flat layout, no collapsibles, easy to understand.
|
||
*/
|
||
// Preset info content for individual presets
|
||
function getPresetInfoContent(presetName: string): { title: string; description: string; details: string[] } {
|
||
const name = presetName.toLowerCase();
|
||
if (name.includes('sprint')) {
|
||
return {
|
||
title: 'Sprint + Feature Format',
|
||
description: 'A two-race weekend format with a shorter sprint race and a longer feature race.',
|
||
details: [
|
||
'Sprint race typically awards reduced points (e.g., 8-6-4-3-2-1)',
|
||
'Feature race awards full points (e.g., 25-18-15-12-10-8-6-4-2-1)',
|
||
'Grid for feature often based on sprint results',
|
||
'Great for competitive leagues with time for multiple races',
|
||
],
|
||
};
|
||
}
|
||
if (name.includes('endurance') || name.includes('long')) {
|
||
return {
|
||
title: 'Endurance Format',
|
||
description: 'Long-form racing focused on consistency and strategy over raw pace.',
|
||
details: [
|
||
'Single race per weekend, longer duration (60-90+ minutes)',
|
||
'Higher points for finishing (rewards reliability)',
|
||
'Often includes mandatory pit stops',
|
||
'Best for serious leagues with dedicated racers',
|
||
],
|
||
};
|
||
}
|
||
if (name.includes('club') || name.includes('casual')) {
|
||
return {
|
||
title: 'Club/Casual Format',
|
||
description: 'Relaxed format perfect for community leagues and casual racing.',
|
||
details: [
|
||
'Simple points structure, easy to understand',
|
||
'Typically single race per weekend',
|
||
'Lower stakes, focus on participation',
|
||
'Great for beginners or mixed-skill leagues',
|
||
],
|
||
};
|
||
}
|
||
return {
|
||
title: 'Standard Race Format',
|
||
description: 'Traditional single-race weekend with standard F1-style points.',
|
||
details: [
|
||
'Points: 25-18-15-12-10-8-6-4-2-1 for top 10',
|
||
'Bonus points for pole position and fastest lap',
|
||
'One race per weekend',
|
||
'The most common format used in sim racing',
|
||
],
|
||
};
|
||
}
|
||
|
||
export function ScoringPatternSection({
|
||
scoring,
|
||
presets,
|
||
readOnly,
|
||
patternError,
|
||
onChangePatternId,
|
||
onToggleCustomScoring,
|
||
onUpdateCustomPoints,
|
||
}: ScoringPatternSectionProps) {
|
||
const disabled = readOnly || !onChangePatternId;
|
||
const currentPreset = presets.find((p) => p.id === scoring.patternId) ?? null;
|
||
const isCustom = scoring.customScoringEnabled;
|
||
|
||
// Local state for custom points editor
|
||
const [customPoints, setCustomPoints] = useState<CustomPointsConfig>(DEFAULT_CUSTOM_POINTS);
|
||
|
||
const updateRacePoints = (index: number, delta: number) => {
|
||
setCustomPoints((prev) => {
|
||
const newPoints = [...prev.racePoints];
|
||
newPoints[index] = Math.max(0, (newPoints[index] ?? 0) + delta);
|
||
const updated = { ...prev, racePoints: newPoints };
|
||
onUpdateCustomPoints?.(updated);
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const addPosition = () => {
|
||
setCustomPoints((prev) => {
|
||
const lastPoints = prev.racePoints[prev.racePoints.length - 1] ?? 0;
|
||
const updated = { ...prev, racePoints: [...prev.racePoints, Math.max(0, lastPoints - 1)] };
|
||
onUpdateCustomPoints?.(updated);
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const removePosition = () => {
|
||
if (customPoints.racePoints.length <= 3) return;
|
||
setCustomPoints((prev) => {
|
||
const updated = { ...prev, racePoints: prev.racePoints.slice(0, -1) };
|
||
onUpdateCustomPoints?.(updated);
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const updateBonus = (key: keyof Omit<CustomPointsConfig, 'racePoints'>, delta: number) => {
|
||
setCustomPoints((prev) => {
|
||
const updated = { ...prev, [key]: Math.max(0, prev[key] + delta) };
|
||
onUpdateCustomPoints?.(updated);
|
||
return updated;
|
||
});
|
||
};
|
||
|
||
const resetToDefaults = () => {
|
||
setCustomPoints(DEFAULT_CUSTOM_POINTS);
|
||
onUpdateCustomPoints?.(DEFAULT_CUSTOM_POINTS);
|
||
};
|
||
|
||
const getPresetEmoji = (preset: LeagueScoringPresetDTO) => {
|
||
const name = preset.name.toLowerCase();
|
||
if (name.includes('sprint') || name.includes('double')) return '⚡';
|
||
if (name.includes('endurance') || name.includes('long')) return '🏆';
|
||
if (name.includes('club') || name.includes('casual')) return '🏅';
|
||
return '🏁';
|
||
};
|
||
|
||
const getPresetDescription = (preset: LeagueScoringPresetDTO) => {
|
||
const name = preset.name.toLowerCase();
|
||
if (name.includes('sprint')) return 'Sprint + Feature race';
|
||
if (name.includes('endurance')) return 'Long-form endurance';
|
||
if (name.includes('club')) return 'Casual league format';
|
||
return preset.sessionSummary;
|
||
};
|
||
|
||
// Flyout state
|
||
const [showPointsFlyout, setShowPointsFlyout] = useState(false);
|
||
const [showBonusFlyout, setShowBonusFlyout] = useState(false);
|
||
const [activePresetFlyout, setActivePresetFlyout] = useState<string | null>(null);
|
||
const pointsInfoRef = useRef<HTMLButtonElement>(null);
|
||
const bonusInfoRef = useRef<HTMLButtonElement>(null);
|
||
const presetInfoRefs = useRef<Record<string, HTMLElement | null>>({});
|
||
|
||
return (
|
||
<div className="space-y-5">
|
||
{/* Section header */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-blue/10">
|
||
<Trophy className="w-5 h-5 text-primary-blue" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-sm font-semibold text-white">Points System</h3>
|
||
<InfoButton buttonRef={pointsInfoRef} onClick={() => setShowPointsFlyout(true)} />
|
||
</div>
|
||
<p className="text-xs text-gray-500">Choose how points are awarded</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Points System Flyout */}
|
||
<InfoFlyout
|
||
isOpen={showPointsFlyout}
|
||
onClose={() => setShowPointsFlyout(false)}
|
||
title="How Points Work"
|
||
anchorRef={pointsInfoRef}
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-xs text-gray-400">
|
||
Points are awarded based on finishing position. Higher positions earn more points,
|
||
which accumulate across the season to determine championship standings.
|
||
</p>
|
||
|
||
<div>
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide mb-2">Example: F1-Style Points</div>
|
||
<PointsSystemMockup />
|
||
</div>
|
||
|
||
<div className="rounded-lg bg-primary-blue/5 border border-primary-blue/20 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Zap className="w-3.5 h-3.5 text-primary-blue shrink-0 mt-0.5" />
|
||
<div className="text-[11px] text-gray-400">
|
||
<span className="font-medium text-primary-blue">Pro tip:</span> Sprint formats
|
||
award points in both races, typically with reduced points for the sprint.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</InfoFlyout>
|
||
|
||
{/* Two-column layout: Presets | Custom */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4">
|
||
{/* Preset options */}
|
||
<div className="space-y-2">
|
||
{presets.length === 0 ? (
|
||
<p className="text-sm text-gray-400 p-4 border border-dashed border-charcoal-outline rounded-lg">
|
||
Loading presets...
|
||
</p>
|
||
) : (
|
||
presets.map((preset) => {
|
||
const isSelected = !isCustom && scoring.patternId === preset.id;
|
||
const presetInfo = getPresetInfoContent(preset.name);
|
||
return (
|
||
<div key={preset.id} className="relative">
|
||
<button
|
||
type="button"
|
||
onClick={() => onChangePatternId?.(preset.id)}
|
||
disabled={disabled}
|
||
className={`
|
||
w-full flex items-center gap-3 p-3 rounded-xl border-2 text-left transition-all duration-200
|
||
${isSelected
|
||
? 'border-primary-blue bg-primary-blue/10'
|
||
: 'border-charcoal-outline/40 bg-iron-gray/20 hover:border-charcoal-outline hover:bg-iron-gray/40'
|
||
}
|
||
${disabled ? 'cursor-default opacity-60' : 'cursor-pointer'}
|
||
`}
|
||
>
|
||
{/* Radio indicator */}
|
||
<div className={`
|
||
flex h-5 w-5 items-center justify-center rounded-full border-2 shrink-0 transition-colors
|
||
${isSelected ? 'border-primary-blue bg-primary-blue' : 'border-gray-500'}
|
||
`}>
|
||
{isSelected && <Check className="w-3 h-3 text-white" />}
|
||
</div>
|
||
|
||
{/* Emoji */}
|
||
<span className="text-xl">{getPresetEmoji(preset)}</span>
|
||
|
||
{/* Text */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-sm font-medium text-white">{preset.name}</div>
|
||
<div className="text-xs text-gray-500">{getPresetDescription(preset)}</div>
|
||
</div>
|
||
|
||
{/* Bonus badge */}
|
||
{preset.bonusSummary && (
|
||
<span className="hidden sm:inline-flex items-center gap-1 px-2 py-1 rounded-full bg-charcoal-outline/30 text-[10px] text-gray-400">
|
||
<Zap className="w-3 h-3" />
|
||
{preset.bonusSummary}
|
||
</span>
|
||
)}
|
||
|
||
{/* Info button */}
|
||
<div
|
||
ref={(el) => { presetInfoRefs.current[preset.id] = el; }}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setActivePresetFlyout(activePresetFlyout === preset.id ? null : preset.id);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setActivePresetFlyout(activePresetFlyout === preset.id ? null : preset.id);
|
||
}
|
||
}}
|
||
className="flex h-6 w-6 items-center justify-center rounded-full text-gray-500 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors shrink-0"
|
||
>
|
||
<HelpCircle className="w-3.5 h-3.5" />
|
||
</div>
|
||
</button>
|
||
|
||
{/* Preset Info Flyout */}
|
||
<InfoFlyout
|
||
isOpen={activePresetFlyout === preset.id}
|
||
onClose={() => setActivePresetFlyout(null)}
|
||
title={presetInfo.title}
|
||
anchorRef={{ current: presetInfoRefs.current[preset.id] ?? null }}
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-xs text-gray-400">{presetInfo.description}</p>
|
||
|
||
<div className="space-y-2">
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide">Key Features</div>
|
||
<ul className="space-y-1.5">
|
||
{presetInfo.details.map((detail, idx) => (
|
||
<li key={idx} className="flex items-start gap-2 text-xs text-gray-400">
|
||
<Check className="w-3 h-3 text-performance-green shrink-0 mt-0.5" />
|
||
<span>{detail}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{preset.bonusSummary && (
|
||
<div className="rounded-lg bg-primary-blue/5 border border-primary-blue/20 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Zap className="w-3.5 h-3.5 text-primary-blue shrink-0 mt-0.5" />
|
||
<div className="text-[11px] text-gray-400">
|
||
<span className="font-medium text-primary-blue">Bonus points:</span> {preset.bonusSummary}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</InfoFlyout>
|
||
</div>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* Custom scoring option */}
|
||
<div className="lg:w-48">
|
||
<button
|
||
type="button"
|
||
onClick={onToggleCustomScoring}
|
||
disabled={!onToggleCustomScoring || readOnly}
|
||
className={`
|
||
w-full h-full min-h-[100px] flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 transition-all duration-200
|
||
${isCustom
|
||
? 'border-primary-blue bg-primary-blue/10'
|
||
: 'border-dashed border-charcoal-outline/50 bg-iron-gray/10 hover:border-charcoal-outline hover:bg-iron-gray/20'
|
||
}
|
||
${readOnly ? 'cursor-default opacity-60' : 'cursor-pointer'}
|
||
`}
|
||
>
|
||
<div className={`
|
||
flex h-10 w-10 items-center justify-center rounded-xl transition-colors
|
||
${isCustom ? 'bg-primary-blue/20' : 'bg-charcoal-outline/30'}
|
||
`}>
|
||
<Settings className={`w-5 h-5 ${isCustom ? 'text-primary-blue' : 'text-gray-500'}`} />
|
||
</div>
|
||
<div className="text-center">
|
||
<div className={`text-sm font-medium ${isCustom ? 'text-white' : 'text-gray-400'}`}>
|
||
Custom
|
||
</div>
|
||
<div className="text-[10px] text-gray-500">
|
||
Define your own
|
||
</div>
|
||
</div>
|
||
{isCustom && (
|
||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary-blue/20 text-[10px] font-medium text-primary-blue">
|
||
<Check className="w-2.5 h-2.5" />
|
||
Active
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error message */}
|
||
{patternError && (
|
||
<p className="text-xs text-warning-amber">{patternError}</p>
|
||
)}
|
||
|
||
{/* Custom scoring editor - inline, no placeholder */}
|
||
{isCustom && (
|
||
<div className="space-y-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline/50">
|
||
{/* Header with reset button */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Settings className="w-4 h-4 text-primary-blue" />
|
||
<span className="text-sm font-medium text-white">Custom Points Table</span>
|
||
<InfoButton buttonRef={bonusInfoRef} onClick={() => setShowBonusFlyout(true)} />
|
||
</div>
|
||
|
||
{/* Bonus Points Flyout */}
|
||
<InfoFlyout
|
||
isOpen={showBonusFlyout}
|
||
onClose={() => setShowBonusFlyout(false)}
|
||
title="Bonus Points Explained"
|
||
anchorRef={bonusInfoRef}
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-xs text-gray-400">
|
||
Bonus points reward exceptional performances beyond just finishing position.
|
||
They add strategic depth and excitement to your championship.
|
||
</p>
|
||
|
||
<div>
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide mb-2">Available Bonuses</div>
|
||
<BonusPointsMockup />
|
||
</div>
|
||
|
||
<div className="rounded-lg bg-primary-blue/5 border border-primary-blue/20 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Zap className="w-3.5 h-3.5 text-primary-blue shrink-0 mt-0.5" />
|
||
<div className="text-[11px] text-gray-400">
|
||
<span className="font-medium text-primary-blue">Example:</span> A driver finishing
|
||
P1 with pole and fastest lap would earn 25 + 1 + 1 = 27 points.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</InfoFlyout>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={resetToDefaults}
|
||
disabled={readOnly}
|
||
className="flex items-center gap-1 px-2 py-1 rounded-md text-[10px] text-gray-400 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors"
|
||
>
|
||
<RotateCcw className="w-3 h-3" />
|
||
Reset
|
||
</button>
|
||
</div>
|
||
|
||
{/* Race position points */}
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-gray-400">Finish position points</span>
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
type="button"
|
||
onClick={removePosition}
|
||
disabled={readOnly || customPoints.racePoints.length <= 3}
|
||
className="flex h-5 w-5 items-center justify-center rounded bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white hover:border-primary-blue disabled:opacity-30 transition-colors"
|
||
>
|
||
<Minus className="w-3 h-3" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={addPosition}
|
||
disabled={readOnly || customPoints.racePoints.length >= 20}
|
||
className="flex h-5 w-5 items-center justify-center rounded bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white hover:border-primary-blue disabled:opacity-30 transition-colors"
|
||
>
|
||
<Plus className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-1">
|
||
{customPoints.racePoints.map((pts, idx) => (
|
||
<div key={idx} className="flex flex-col items-center">
|
||
<span className="text-[9px] text-gray-500 mb-0.5">P{idx + 1}</span>
|
||
<div className="flex items-center gap-0.5">
|
||
<button
|
||
type="button"
|
||
onClick={() => updateRacePoints(idx, -1)}
|
||
disabled={readOnly || pts <= 0}
|
||
className="flex h-5 w-4 items-center justify-center rounded-l bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white disabled:opacity-30 text-[10px] transition-colors"
|
||
>
|
||
−
|
||
</button>
|
||
<div className="flex h-5 w-6 items-center justify-center bg-deep-graphite border-y border-charcoal-outline">
|
||
<span className="text-[10px] font-medium text-white">{pts}</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => updateRacePoints(idx, 1)}
|
||
disabled={readOnly}
|
||
className="flex h-5 w-4 items-center justify-center rounded-r bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white disabled:opacity-30 text-[10px] transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bonus points */}
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{[
|
||
{ key: 'poleBonusPoints' as const, label: 'Pole', emoji: '🏎️' },
|
||
{ key: 'fastestLapPoints' as const, label: 'Fast lap', emoji: '⚡' },
|
||
{ key: 'leaderLapPoints' as const, label: 'Led lap', emoji: '🥇' },
|
||
].map((bonus) => (
|
||
<div key={bonus.key} className="flex flex-col items-center gap-1">
|
||
<span className="text-[10px] text-gray-500">{bonus.emoji} {bonus.label}</span>
|
||
<div className="flex items-center gap-0.5">
|
||
<button
|
||
type="button"
|
||
onClick={() => updateBonus(bonus.key, -1)}
|
||
disabled={readOnly || customPoints[bonus.key] <= 0}
|
||
className="flex h-6 w-5 items-center justify-center rounded-l bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white disabled:opacity-30 transition-colors"
|
||
>
|
||
−
|
||
</button>
|
||
<div className="flex h-6 w-7 items-center justify-center bg-deep-graphite border-y border-charcoal-outline">
|
||
<span className="text-xs font-medium text-white">{customPoints[bonus.key]}</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => updateBonus(bonus.key, 1)}
|
||
disabled={readOnly}
|
||
className="flex h-6 w-5 items-center justify-center rounded-r bg-iron-gray border border-charcoal-outline text-gray-500 hover:text-white disabled:opacity-30 transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Championships section - simple inline toggle list.
|
||
* No collapsibles, flat and easy to scan.
|
||
*/
|
||
// Championship info content
|
||
const CHAMPIONSHIP_INFO: Record<string, { title: string; description: string; details: string[] }> = {
|
||
enableDriverChampionship: {
|
||
title: 'Driver Championship',
|
||
description: 'Track individual driver performance across all races in the season.',
|
||
details: [
|
||
'Each driver accumulates points based on race finishes',
|
||
'The driver with most points at season end wins',
|
||
'Standard in all racing leagues',
|
||
'Shows overall driver skill and consistency',
|
||
],
|
||
},
|
||
enableTeamChampionship: {
|
||
title: 'Team Championship',
|
||
description: 'Combine points from all drivers within a team for team standings.',
|
||
details: [
|
||
'All drivers\' points count toward team total',
|
||
'Rewards having consistent performers across the roster',
|
||
'Creates team strategy opportunities',
|
||
'Only available in Teams mode leagues',
|
||
],
|
||
},
|
||
enableNationsChampionship: {
|
||
title: 'Nations Cup',
|
||
description: 'Group drivers by nationality for international competition.',
|
||
details: [
|
||
'Drivers represent their country automatically',
|
||
'Points pooled by nationality',
|
||
'Adds international rivalry element',
|
||
'Great for diverse, international leagues',
|
||
],
|
||
},
|
||
enableTrophyChampionship: {
|
||
title: 'Trophy Championship',
|
||
description: 'A special category championship for specific classes or groups.',
|
||
details: [
|
||
'Custom category you define (e.g., Am drivers, rookies)',
|
||
'Separate standings from main championship',
|
||
'Encourages participation from all skill levels',
|
||
'Can be used for gentleman drivers, newcomers, etc.',
|
||
],
|
||
},
|
||
};
|
||
|
||
export function ChampionshipsSection({
|
||
form,
|
||
onChange,
|
||
readOnly,
|
||
}: ChampionshipsSectionProps) {
|
||
const disabled = readOnly || !onChange;
|
||
const isTeamsMode = form.structure.mode === 'fixedTeams';
|
||
const [showChampFlyout, setShowChampFlyout] = useState(false);
|
||
const [activeChampFlyout, setActiveChampFlyout] = useState<string | null>(null);
|
||
const champInfoRef = useRef<HTMLButtonElement>(null);
|
||
const champItemRefs = useRef<Record<string, HTMLElement | null>>({});
|
||
|
||
const updateChampionship = (key: keyof LeagueConfigFormModel['championships'], value: boolean) => {
|
||
if (!onChange) return;
|
||
onChange({
|
||
...form,
|
||
championships: {
|
||
...form.championships,
|
||
[key]: value,
|
||
},
|
||
});
|
||
};
|
||
|
||
const championships = [
|
||
{
|
||
key: 'enableDriverChampionship' as const,
|
||
icon: Trophy,
|
||
label: 'Driver Standings',
|
||
description: 'Track individual driver points',
|
||
enabled: form.championships.enableDriverChampionship,
|
||
available: true,
|
||
},
|
||
{
|
||
key: 'enableTeamChampionship' as const,
|
||
icon: Award,
|
||
label: 'Team Standings',
|
||
description: 'Combined team points',
|
||
enabled: form.championships.enableTeamChampionship,
|
||
available: isTeamsMode,
|
||
unavailableHint: 'Teams mode only',
|
||
},
|
||
{
|
||
key: 'enableNationsChampionship' as const,
|
||
icon: Globe,
|
||
label: 'Nations Cup',
|
||
description: 'By nationality',
|
||
enabled: form.championships.enableNationsChampionship,
|
||
available: true,
|
||
},
|
||
{
|
||
key: 'enableTrophyChampionship' as const,
|
||
icon: Medal,
|
||
label: 'Trophy Cup',
|
||
description: 'Special category',
|
||
enabled: form.championships.enableTrophyChampionship,
|
||
available: true,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Section header */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-blue/10">
|
||
<Award className="w-5 h-5 text-primary-blue" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="text-sm font-semibold text-white">Championships</h3>
|
||
<InfoButton buttonRef={champInfoRef} onClick={() => setShowChampFlyout(true)} />
|
||
</div>
|
||
<p className="text-xs text-gray-500">What standings to track</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Championships Flyout */}
|
||
<InfoFlyout
|
||
isOpen={showChampFlyout}
|
||
onClose={() => setShowChampFlyout(false)}
|
||
title="Championship Standings"
|
||
anchorRef={champInfoRef}
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-xs text-gray-400">
|
||
Championships track cumulative points across all races. You can enable multiple
|
||
championship types to run different competitions simultaneously.
|
||
</p>
|
||
|
||
<div>
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide mb-2">Live Standings Example</div>
|
||
<ChampionshipMockup />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide">Championship Types</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{[
|
||
{ icon: Trophy, label: 'Driver', desc: 'Individual points' },
|
||
{ icon: Award, label: 'Team', desc: 'Combined drivers' },
|
||
{ icon: Globe, label: 'Nations', desc: 'By country' },
|
||
{ icon: Medal, label: 'Trophy', desc: 'Special class' },
|
||
].map((t, i) => (
|
||
<div key={i} className="flex items-center gap-2 p-2 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
|
||
<t.icon className="w-3.5 h-3.5 text-primary-blue" />
|
||
<div>
|
||
<div className="text-[10px] font-medium text-white">{t.label}</div>
|
||
<div className="text-[9px] text-gray-500">{t.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</InfoFlyout>
|
||
|
||
{/* Inline toggle grid */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{championships.map((champ) => {
|
||
const Icon = champ.icon;
|
||
const isEnabled = champ.enabled && champ.available;
|
||
const champInfo = CHAMPIONSHIP_INFO[champ.key];
|
||
|
||
return (
|
||
<div key={champ.key} className="relative">
|
||
<button
|
||
type="button"
|
||
disabled={disabled || !champ.available}
|
||
onClick={() => champ.available && updateChampionship(champ.key, !champ.enabled)}
|
||
className={`
|
||
w-full flex items-center gap-3 p-3 rounded-xl border text-left transition-all duration-200
|
||
${isEnabled
|
||
? 'border-primary-blue/40 bg-primary-blue/10'
|
||
: champ.available
|
||
? 'border-charcoal-outline/40 bg-iron-gray/20 hover:border-charcoal-outline hover:bg-iron-gray/30'
|
||
: 'border-charcoal-outline/20 bg-iron-gray/10 opacity-50 cursor-not-allowed'
|
||
}
|
||
`}
|
||
>
|
||
{/* Toggle indicator */}
|
||
<div className={`
|
||
flex h-5 w-5 items-center justify-center rounded-md shrink-0 transition-colors
|
||
${isEnabled ? 'bg-primary-blue' : 'bg-charcoal-outline/50'}
|
||
`}>
|
||
{isEnabled && <Check className="w-3 h-3 text-white" />}
|
||
</div>
|
||
|
||
{/* Icon */}
|
||
<Icon className={`w-4 h-4 shrink-0 ${isEnabled ? 'text-primary-blue' : 'text-gray-500'}`} />
|
||
|
||
{/* Text */}
|
||
<div className="flex-1 min-w-0">
|
||
<div className={`text-xs font-medium truncate ${isEnabled ? 'text-white' : 'text-gray-400'}`}>
|
||
{champ.label}
|
||
</div>
|
||
{!champ.available && champ.unavailableHint && (
|
||
<div className="text-[10px] text-warning-amber/70">{champ.unavailableHint}</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Info button */}
|
||
<div
|
||
ref={(el) => { champItemRefs.current[champ.key] = el; }}
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setActiveChampFlyout(activeChampFlyout === champ.key ? null : champ.key);
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setActiveChampFlyout(activeChampFlyout === champ.key ? null : champ.key);
|
||
}
|
||
}}
|
||
className="flex h-5 w-5 items-center justify-center rounded-full text-gray-500 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors shrink-0"
|
||
>
|
||
<HelpCircle className="w-3 h-3" />
|
||
</div>
|
||
</button>
|
||
|
||
{/* Championship Item Info Flyout */}
|
||
{champInfo && (
|
||
<InfoFlyout
|
||
isOpen={activeChampFlyout === champ.key}
|
||
onClose={() => setActiveChampFlyout(null)}
|
||
title={champInfo.title}
|
||
anchorRef={{ current: champItemRefs.current[champ.key] ?? null }}
|
||
>
|
||
<div className="space-y-4">
|
||
<p className="text-xs text-gray-400">{champInfo.description}</p>
|
||
|
||
<div className="space-y-2">
|
||
<div className="text-[10px] text-gray-500 uppercase tracking-wide">How It Works</div>
|
||
<ul className="space-y-1.5">
|
||
{champInfo.details.map((detail, idx) => (
|
||
<li key={idx} className="flex items-start gap-2 text-xs text-gray-400">
|
||
<Check className="w-3 h-3 text-performance-green shrink-0 mt-0.5" />
|
||
<span>{detail}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{!champ.available && (
|
||
<div className="rounded-lg bg-warning-amber/5 border border-warning-amber/20 p-3">
|
||
<div className="flex items-start gap-2">
|
||
<Zap className="w-3.5 h-3.5 text-warning-amber shrink-0 mt-0.5" />
|
||
<div className="text-[11px] text-gray-400">
|
||
<span className="font-medium text-warning-amber">Note:</span> {champ.unavailableHint}. Switch to Teams mode to enable this championship.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</InfoFlyout>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
} |