File size: 3,965 Bytes
8ad64dc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | import { useState } from "react";
export default function CardForm({ onSubmit }) {
const [v, setV] = useState({
credit_score: 720,
annual_income: 70000,
carry_balance: false,
travel_abroad: false,
no_annual_fee: true,
balance_transfer: false,
rewards_pref: "cashback",
spend_groceries: 300,
spend_dining: 250,
spend_gas: 120,
spend_travel: 80,
spend_online: 200,
top_k: 10,
});
function set(name, value) {
setV((p) => ({ ...p, [name]: value }));
}
return (
<form className="form" onSubmit={(e) => { e.preventDefault(); onSubmit(v); }}>
<div className="cardHeader">
<h2>Credit Cards</h2>
</div>
<div className="grid2">
<div className="field">
<label>Credit score</label>
<input
type="range"
min="300"
max="850"
value={v.credit_score}
onChange={(e) => set("credit_score", Number(e.target.value))}
/>
<div className="muted small">{v.credit_score}</div>
</div>
<div className="field">
<label>Annual income</label>
<input
type="number"
value={v.annual_income}
onChange={(e) => set("annual_income", Number(e.target.value))}
/>
</div>
<div className="field">
<label>Rewards</label>
<select value={v.rewards_pref} onChange={(e) => set("rewards_pref", e.target.value)}>
<option value="cashback">Cashback</option>
<option value="travel">Travel</option>
<option value="points">Points</option>
<option value="none">No preference</option>
</select>
</div>
<div className="field">
<label>Top results</label>
<input type="number" value={v.top_k} min="1" max="50" onChange={(e) => set("top_k", Number(e.target.value))} />
</div>
</div>
<div className="grid2">
<div className="field">
<label><input type="checkbox" checked={v.carry_balance} onChange={(e) => set("carry_balance", e.target.checked)} /> I carry a balance</label>
</div>
<div className="field">
<label><input type="checkbox" checked={v.travel_abroad} onChange={(e) => set("travel_abroad", e.target.checked)} /> I travel abroad</label>
</div>
<div className="field">
<label><input type="checkbox" checked={v.no_annual_fee} onChange={(e) => set("no_annual_fee", e.target.checked)} /> Prefer no annual fee</label>
</div>
<div className="field">
<label><input type="checkbox" checked={v.balance_transfer} onChange={(e) => set("balance_transfer", e.target.checked)} /> Need balance transfer</label>
</div>
</div>
<div className="grid2">
<div className="field">
<label>Groceries ($/mo)</label>
<input type="number" value={v.spend_groceries} onChange={(e) => set("spend_groceries", Number(e.target.value))} />
</div>
<div className="field">
<label>Dining ($/mo)</label>
<input type="number" value={v.spend_dining} onChange={(e) => set("spend_dining", Number(e.target.value))} />
</div>
<div className="field">
<label>Gas ($/mo)</label>
<input type="number" value={v.spend_gas} onChange={(e) => set("spend_gas", Number(e.target.value))} />
</div>
<div className="field">
<label>Travel ($/mo)</label>
<input type="number" value={v.spend_travel} onChange={(e) => set("spend_travel", Number(e.target.value))} />
</div>
<div className="field">
<label>Online ($/mo)</label>
<input type="number" value={v.spend_online} onChange={(e) => set("spend_online", Number(e.target.value))} />
</div>
</div>
<button className="primary" type="submit">Show cards</button>
</form>
);
}
|