61 lines
2.6 KiB
TypeScript
61 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import type { Destination } from "@/lib/types";
|
|
|
|
const RATES: Record<string, { wash: number; dry: number; fold: number; note: string }> = {
|
|
chiangmai: { wash: 25, dry: 20, fold: 15, note: "街边自助洗衣很常见" },
|
|
bali: { wash: 35, dry: 25, fold: 20, note: "按公斤计费，问清是否含烘干" },
|
|
lisbon: { wash: 45, dry: 30, fold: 25, note: "自助洗衣店遍布居民区" },
|
|
barcelona: { wash: 50, dry: 35, fold: 25, note: "旺季可能排队" },
|
|
mexico: { wash: 40, dry: 30, fold: 20, note: "lavandería 按公斤" },
|
|
tokyo: { wash: 55, dry: 40, fold: 0, note: "投币洗衣，通常自折" },
|
|
};
|
|
|
|
interface Props { destinations: Destination[] }
|
|
|
|
export default function LaundryDay({ destinations }: Props) {
|
|
const [slug, setSlug] = useState(destinations[0]?.slug || "chiangmai");
|
|
const [kg, setKg] = useState(4);
|
|
const [dry, setDry] = useState(true);
|
|
const [fold, setFold] = useState(false);
|
|
const rate = RATES[slug] || RATES.chiangmai;
|
|
const total = useMemo(() => {
|
|
let t = rate.wash * kg;
|
|
if (dry) t += rate.dry * kg;
|
|
if (fold) t += rate.fold * kg;
|
|
return Math.round(t);
|
|
}, [rate, kg, dry, fold]);
|
|
return (
|
|
<section className="section kit-section" id="laundry">
|
|
<div className="container">
|
|
<div className="section-header reveal">
|
|
<span className="section-tag">👕 LAUNDRY</span>
|
|
<h2>洗衣日预算</h2>
|
|
<p>出差旅居最容易忘的一笔小开销</p>
|
|
</div>
|
|
<div className="kit-card reveal">
|
|
<div className="kit-row">
|
|
<label className="kit-field"><span>城市</span>
|
|
<select value={slug} onChange={(e) => setSlug(e.target.value)}>
|
|
{destinations.map((d) => <option key={d.slug} value={d.slug}>{d.emoji} {d.name}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="kit-field"><span>重量 {kg} kg</span>
|
|
<input type="range" min={1} max={10} value={kg} onChange={(e) => setKg(+e.target.value)} />
|
|
</label>
|
|
</div>
|
|
<div className="kit-chips">
|
|
<button type="button" className={`kit-chip${dry ? " active" : ""}`} onClick={() => setDry((v) => !v)}>烘干</button>
|
|
<button type="button" className={`kit-chip${fold ? " active" : ""}`} onClick={() => setFold((v) => !v)}>叠衣</button>
|
|
</div>
|
|
<div className="kit-hero">
|
|
<span>🧺</span>
|
|
<div><small>预估</small><strong>¥{total}</strong><p>{rate.note}</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|