128 lines
4.8 KiB
TypeScript
128 lines
4.8 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { Gauge, Timer } from "lucide-react"
|
|
|
|
export interface PerformanceData {
|
|
fpsAvg?: number
|
|
fpsLow?: number
|
|
fpsHigh?: number
|
|
loadTimeSsd?: number
|
|
loadTimeSd?: number
|
|
}
|
|
|
|
interface PerformanceStepProps {
|
|
value: PerformanceData
|
|
onChange: (value: PerformanceData) => void
|
|
}
|
|
|
|
export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
|
|
const error = useMemo(() => {
|
|
if (value.fpsAvg !== undefined && value.fpsAvg !== null && value.fpsAvg <= 0) {
|
|
return "FPS Average must be greater than 0"
|
|
}
|
|
return null
|
|
}, [value.fpsAvg])
|
|
|
|
const update = (field: keyof PerformanceData, val: string) => {
|
|
const num = val === "" ? undefined : Number(val)
|
|
onChange({ ...value, [field]: num })
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* FPS Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Gauge className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold text-text">Frame Rate</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">
|
|
FPS Average <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
step={1}
|
|
value={value.fpsAvg ?? ""}
|
|
onChange={(e) => update("fpsAvg", e.target.value)}
|
|
placeholder="e.g. 45"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
<p className="text-[10px] text-text/30">Required — average framerate during gameplay</p>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">FPS Low</label>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
step={1}
|
|
value={value.fpsLow ?? ""}
|
|
onChange={(e) => update("fpsLow", e.target.value)}
|
|
placeholder="e.g. 30"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">FPS High</label>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
step={1}
|
|
value={value.fpsHigh ?? ""}
|
|
onChange={(e) => update("fpsHigh", e.target.value)}
|
|
placeholder="e.g. 60"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="text-xs text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Load Time Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Timer className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold text-text">Load Times</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">Load Time SSD (seconds)</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
step={0.1}
|
|
value={value.loadTimeSsd ?? ""}
|
|
onChange={(e) => update("loadTimeSsd", e.target.value)}
|
|
placeholder="e.g. 12.5"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">Load Time SD Card (seconds)</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
step={0.1}
|
|
value={value.loadTimeSd ?? ""}
|
|
onChange={(e) => update("loadTimeSd", e.target.value)}
|
|
placeholder="e.g. 35.0"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|