Spaces:
Running
Running
| "use client"; | |
| import { | |
| ALL_DEALBREAKERS, | |
| dealbreakerLabel, | |
| type Dealbreaker, | |
| type ScoringWeights, | |
| } from "@/lib/job-search-preferences"; | |
| import { MATCH_SCORE_WEIGHTS } from "@/lib/score-display"; | |
| export type ScoringControlValues = { | |
| scoringWeights: ScoringWeights; | |
| dealbreakers: Dealbreaker[]; | |
| }; | |
| export function scoringControlValuesFromPrefs(opts?: { | |
| scoringWeights?: ScoringWeights; | |
| dealbreakers?: Dealbreaker[]; | |
| }): ScoringControlValues { | |
| return { | |
| scoringWeights: { | |
| role_fit: opts?.scoringWeights?.role_fit ?? MATCH_SCORE_WEIGHTS.role_fit * 10, | |
| global_remote: opts?.scoringWeights?.global_remote ?? MATCH_SCORE_WEIGHTS.global_remote * 10, | |
| culture_async: opts?.scoringWeights?.culture_async ?? MATCH_SCORE_WEIGHTS.culture_async * 10, | |
| contractor_friendly: | |
| opts?.scoringWeights?.contractor_friendly ?? MATCH_SCORE_WEIGHTS.contractor_friendly * 10, | |
| }, | |
| dealbreakers: opts?.dealbreakers ?? [], | |
| }; | |
| } | |
| const WEIGHT_FIELDS: Array<{ key: keyof ScoringWeights; label: string }> = [ | |
| { key: "role_fit", label: "Role & skill fit" }, | |
| { key: "global_remote", label: "Worldwide remote" }, | |
| { key: "culture_async", label: "Async culture" }, | |
| { key: "contractor_friendly", label: "Contractor-friendly" }, | |
| ]; | |
| type Props = { | |
| values: ScoringControlValues; | |
| onChange: (next: ScoringControlValues) => void; | |
| disabled?: boolean; | |
| }; | |
| export function ScoringControlForm({ values, onChange, disabled = false }: Props) { | |
| const setWeight = (key: keyof ScoringWeights, raw: string) => { | |
| const n = Number(raw); | |
| onChange({ | |
| ...values, | |
| scoringWeights: { | |
| ...values.scoringWeights, | |
| [key]: Number.isFinite(n) ? Math.max(0, Math.min(10, n)) : 0, | |
| }, | |
| }); | |
| }; | |
| const toggleDealbreaker = (d: Dealbreaker) => { | |
| const has = values.dealbreakers.includes(d); | |
| onChange({ | |
| ...values, | |
| dealbreakers: has ? | |
| values.dealbreakers.filter((x) => x !== d) | |
| : [...values.dealbreakers, d], | |
| }); | |
| }; | |
| return ( | |
| <> | |
| <div className="app-shell__section" style={{ marginBottom: 12 }}> | |
| <span className="app-shell__section-label">What should weigh most in the match %</span> | |
| <p className="app-shell__field-hint" style={{ margin: "4px 0 8px", fontSize: 12 }}> | |
| Defaults favour role fit and worldwide remote. Values are relative. They do not have to | |
| add to 10. | |
| </p> | |
| {WEIGHT_FIELDS.map(({ key, label }) => ( | |
| <label | |
| key={key} | |
| style={{ | |
| display: "grid", | |
| gridTemplateColumns: "1fr auto", | |
| gap: 8, | |
| alignItems: "center", | |
| marginBottom: 6, | |
| fontSize: 12, | |
| }} | |
| > | |
| <span> | |
| {label} | |
| <input | |
| type="range" | |
| min={0} | |
| max={10} | |
| step={0.5} | |
| disabled={disabled} | |
| value={values.scoringWeights[key] ?? 0} | |
| onChange={(e) => setWeight(key, e.target.value)} | |
| style={{ width: "100%", marginTop: 4 }} | |
| /> | |
| </span> | |
| <span style={{ fontVariantNumeric: "tabular-nums", minWidth: "3ch" }}> | |
| {Number(values.scoringWeights[key] ?? 0).toFixed(1)} | |
| </span> | |
| </label> | |
| ))} | |
| </div> | |
| <div className="app-shell__section" style={{ marginBottom: 12 }}> | |
| <span className="app-shell__section-label">Dealbreakers</span> | |
| <p className="app-shell__field-hint" style={{ margin: "4px 0 8px", fontSize: 12 }}> | |
| Hard rules. A listing that breaks any of these is scored Skip, with an explicit callout. | |
| </p> | |
| <div style={{ display: "flex", flexDirection: "column", gap: 6 }}> | |
| {ALL_DEALBREAKERS.map((d) => ( | |
| <label | |
| key={d} | |
| style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12 }} | |
| > | |
| <input | |
| type="checkbox" | |
| disabled={disabled} | |
| checked={values.dealbreakers.includes(d)} | |
| onChange={() => toggleDealbreaker(d)} | |
| style={{ marginTop: 2 }} | |
| /> | |
| <span>{dealbreakerLabel(d)}</span> | |
| </label> | |
| ))} | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| } | |