feat: add wizard step components

2026-04-26 10:22:56 -05:00
parent f89c7c3969
commit db677fa9bf
6 changed files with 741 additions and 0 deletions
@@ -0,0 +1,126 @@
+"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"
+            />
+          </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>
+  )
+}