spb/autoscholar

1import { DISCIPLINE_LABELS, RESEARCH_MODE_LABELS } from "@autoscholar/schemas";2import { t } from "@/lib/i18n";34export function SearchFilters({5  q,6  series,7}: {8  q: Record<string, string | undefined>;9  series: Array<{ slug: string; name: string }>;10}) {11  return (12    <search>13      <form14        method="get"15        action="/research"16        className="surface grid gap-3 p-4 md:grid-cols-12"17        aria-label="Search the library"18      >19        <div className="md:col-span-12">20          <label htmlFor="q" className="label mb-1">21            Search22          </label>23          <input24            id="q"25            name="q"26            type="search"27            defaultValue={q.q ?? ""}28            placeholder={t("search.placeholder")}29            className="input"30          />31        </div>32        <div className="md:col-span-3">33          <label htmlFor="discipline" className="label mb-1">34            Discipline35          </label>36          <select id="discipline" name="discipline" defaultValue={q.discipline ?? ""} className="input">37            <option value="">All</option>38            {Object.entries(DISCIPLINE_LABELS).map(([k, v]) => (39              <option key={k} value={k}>40                {v}41              </option>42            ))}43          </select>44        </div>45        <div className="md:col-span-3">46          <label htmlFor="mode" className="label mb-1">47            Methodology48          </label>49          <select id="mode" name="mode" defaultValue={q.mode ?? ""} className="input">50            <option value="">All</option>51            {Object.entries(RESEARCH_MODE_LABELS).map(([k, v]) => (52              <option key={k} value={k}>53                {v}54              </option>55            ))}56          </select>57        </div>58        <div className="md:col-span-2">59          <label htmlFor="series" className="label mb-1">60            Series61          </label>62          <select id="series" name="series" defaultValue={q.series ?? ""} className="input">63            <option value="">All</option>64            {series.map((s) => (65              <option key={s.slug} value={s.slug}>66                {s.name}67              </option>68            ))}69          </select>70        </div>71        <div className="md:col-span-2">72          <label htmlFor="status" className="label mb-1">73            Status74          </label>75          <select id="status" name="status" defaultValue={q.status ?? ""} className="input">76            <option value="">Any</option>77            <option value="published">Published</option>78            <option value="corrected">Corrected</option>79            <option value="retracted">Retracted</option>80          </select>81        </div>82        <div className="md:col-span-2">83          <label htmlFor="sort" className="label mb-1">84            Sort85          </label>86          <select id="sort" name="sort" defaultValue={q.sort ?? "date"} className="input">87            <option value="date">Newest</option>88            <option value="relevance">Relevance</option>89            <option value="title">Title</option>90          </select>91        </div>92        <div className="md:col-span-2">93          <label htmlFor="from" className="label mb-1">94            From95          </label>96          <input id="from" name="from" type="date" defaultValue={q.from ?? ""} className="input" />97        </div>98        <div className="md:col-span-2">99          <label htmlFor="to" className="label mb-1">100            To101          </label>102          <input id="to" name="to" type="date" defaultValue={q.to ?? ""} className="input" />103        </div>104        <fieldset className="flex items-end gap-4 md:col-span-4">105          <legend className="label mb-1">Availability</legend>106          <label className="flex items-center gap-2 text-sm">107            <input type="checkbox" name="code" value="1" defaultChecked={q.code === "1"} /> Code108          </label>109          <label className="flex items-center gap-2 text-sm">110            <input type="checkbox" name="data" value="1" defaultChecked={q.data === "1"} /> Data111          </label>112        </fieldset>113        <div className="flex items-end gap-2 md:col-span-4 md:justify-end">114          <a href="/research" className="btn">115            Reset116          </a>117          <button type="submit" className="btn btn-primary">118            Apply119          </button>120        </div>121      </form>122    </search>123  );124}125