78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
/**
|
|
* RaceCreationSuccessScreen component
|
|
* Displays the successful race creation result with session details.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface RaceCreationResult {
|
|
sessionId: string;
|
|
sessionName: string;
|
|
trackId: string;
|
|
carIds: string[];
|
|
finalPrice: string;
|
|
createdAt: Date;
|
|
}
|
|
|
|
interface RaceCreationSuccessScreenProps {
|
|
result: RaceCreationResult;
|
|
}
|
|
|
|
export const RaceCreationSuccessScreen: React.FC<RaceCreationSuccessScreenProps> = ({
|
|
result,
|
|
}) => {
|
|
return (
|
|
<div className="race-creation-success-screen">
|
|
<div className="success-container">
|
|
<div className="success-header">
|
|
<h2>✅ Race Created Successfully!</h2>
|
|
</div>
|
|
|
|
<div className="success-details">
|
|
<div className="detail-section">
|
|
<h3>Session Information</h3>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Session Name:</span>
|
|
<span className="detail-value">{result.sessionName}</span>
|
|
</div>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Session ID:</span>
|
|
<span className="detail-value">{result.sessionId}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="detail-section">
|
|
<h3>Track & Cars</h3>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Track:</span>
|
|
<span className="detail-value">{result.trackId}</span>
|
|
</div>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Cars:</span>
|
|
<span className="detail-value">{result.carIds.join(', ')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="detail-section">
|
|
<h3>Financial</h3>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Final Price:</span>
|
|
<span className="detail-value price">{result.finalPrice}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="detail-section">
|
|
<h3>Created</h3>
|
|
<div className="detail-row">
|
|
<span className="detail-label">Timestamp:</span>
|
|
<span className="detail-value">
|
|
{result.createdAt.toISOString().split('T')[0]} at{' '}
|
|
{result.createdAt.toLocaleTimeString()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |