99 lines
3.1 KiB
TypeScript
Executable File
99 lines
3.1 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import { FlPoints } from '@/lib/schemas/leaderboard';
|
|
|
|
interface FlPointsEditorProps {
|
|
flPoints: FlPoints;
|
|
onChange: (flPoints: FlPoints) => void;
|
|
}
|
|
|
|
export function FlPointsEditor({ flPoints, onChange }: FlPointsEditorProps) {
|
|
const update = (patch: Partial<FlPoints>) => onChange({ ...flPoints, ...patch });
|
|
|
|
return (
|
|
<div className="rounded-lg bg-gray-700 p-4">
|
|
<p className="mb-4 text-sm text-gray-400">
|
|
Points awarded to the driver who sets the fastest lap in each race.
|
|
</p>
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Label</label>
|
|
<input
|
|
type="text"
|
|
value={flPoints.label}
|
|
onChange={(e) => update({ label: e.target.value })}
|
|
className="w-24 rounded bg-gray-600 px-2 py-1 text-sm text-white"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Points</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={flPoints.points}
|
|
onChange={(e) => update({ points: parseInt(e.target.value) || 0 })}
|
|
className="w-20 rounded bg-gray-600 px-2 py-1 text-sm text-white"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Priority</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={flPoints.priority}
|
|
onChange={(e) => update({ priority: parseInt(e.target.value) || 0 })}
|
|
className="w-20 rounded bg-gray-600 px-2 py-1 text-sm text-white"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Bg Color</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={flPoints.color}
|
|
onChange={(e) => update({ color: e.target.value })}
|
|
className="h-8 w-8 cursor-pointer rounded border-0 bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={flPoints.color}
|
|
onChange={(e) => {
|
|
if (/^#[0-9a-fA-F]{6}$/.test(e.target.value)) update({ color: e.target.value });
|
|
}}
|
|
className="w-24 rounded bg-gray-600 px-2 py-1 font-mono text-sm text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Text Color</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={flPoints.textColor}
|
|
onChange={(e) => update({ textColor: e.target.value })}
|
|
className="h-8 w-8 cursor-pointer rounded border-0 bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={flPoints.textColor}
|
|
onChange={(e) => {
|
|
if (/^#[0-9a-fA-F]{6}$/.test(e.target.value)) update({ textColor: e.target.value });
|
|
}}
|
|
className="w-24 rounded bg-gray-600 px-2 py-1 font-mono text-sm text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-xs text-gray-400">Preview</label>
|
|
<span
|
|
className="rounded px-2 py-1 text-sm font-semibold"
|
|
style={{ backgroundColor: flPoints.color, color: flPoints.textColor }}
|
|
>
|
|
{flPoints.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|