brackt/app/components/marketing/ScoringTables.tsx

51 lines
2.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

interface TableProps {
className?: string;
}
export function ScoringPointsTable({ className }: TableProps) {
return (
<div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border">
<th className="text-left p-3 font-semibold text-foreground">Finish</th>
<th className="text-right p-3 font-semibold text-foreground">Points</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
<tr><td className="p-3">1st Place</td><td className="p-3 text-right font-semibold text-foreground">100</td></tr>
<tr><td className="p-3">2nd Place</td><td className="p-3 text-right font-semibold text-foreground">70</td></tr>
<tr><td className="p-3">3rd Place</td><td className="p-3 text-right font-semibold text-foreground">50</td></tr>
<tr><td className="p-3">4th Place</td><td className="p-3 text-right font-semibold text-foreground">40</td></tr>
<tr><td className="p-3">5th6th Place</td><td className="p-3 text-right font-semibold text-foreground">25</td></tr>
<tr><td className="p-3">7th8th Place</td><td className="p-3 text-right font-semibold text-foreground">15</td></tr>
</tbody>
</table>
</div>
);
}
export function QualifyingPointsTable({ className }: TableProps) {
return (
<div className={`bg-muted rounded-lg overflow-hidden ${className ?? ""}`}>
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border">
<th className="text-left p-3 font-semibold text-foreground">Major Finish</th>
<th className="text-right p-3 font-semibold text-foreground">Qualifying Points</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
<tr><td className="p-3">1st</td><td className="p-3 text-right font-semibold text-foreground">20 QP</td></tr>
<tr><td className="p-3">2nd</td><td className="p-3 text-right font-semibold text-foreground">14 QP</td></tr>
<tr><td className="p-3">3rd</td><td className="p-3 text-right font-semibold text-foreground">10 QP</td></tr>
<tr><td className="p-3">4th</td><td className="p-3 text-right font-semibold text-foreground">8 QP</td></tr>
<tr><td className="p-3">5th6th</td><td className="p-3 text-right font-semibold text-foreground">5 QP</td></tr>
<tr><td className="p-3">7th8th</td><td className="p-3 text-right font-semibold text-foreground">3 QP</td></tr>
<tr><td className="p-3">9th12th</td><td className="p-3 text-right font-semibold text-foreground">2 QP</td></tr>
<tr><td className="p-3">13th16th</td><td className="p-3 text-right font-semibold text-foreground">1 QP</td></tr>
</tbody>
</table>
</div>
);
}