spb/websensor

1"use client";23import { useRouter } from "next/navigation";4import { useState } from "react";56export function CompareForm({ snapshots }: { snapshots: { id: string; label: string }[] }) {7  const router = useRouter();8  const [a, setA] = useState(snapshots[1]?.id ?? "");9  const [b, setB] = useState(snapshots[0]?.id ?? "");10  if (snapshots.length < 2) return <p className="text-[12.5px] text-fg-subtle">At least two snapshots are needed to compare.</p>;11  const sel = "h-8 w-full rounded-md border border-line bg-panel px-2 font-mono text-[12px]";12  return (13    <form14      className="grid gap-2 sm:grid-cols-[1fr_1fr_auto]"15      onSubmit={(e) => {16        e.preventDefault();17        if (a && b && a !== b) router.push(`/compare?a=${a}&b=${b}`);18      }}19    >20      <label className="text-[11px] text-fg-subtle">21        Before22        <select value={a} onChange={(e) => setA(e.target.value)} className={sel}>23          {snapshots.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}24        </select>25      </label>26      <label className="text-[11px] text-fg-subtle">27        After28        <select value={b} onChange={(e) => setB(e.target.value)} className={sel}>29          {snapshots.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}30        </select>31      </label>32      <button type="submit" className="self-end rounded-md border border-line bg-panel-2 px-3 py-1.5 text-[12.5px] hover:border-line-strong">Compare</button>33    </form>34  );35}36