67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useToast } from "@/lib/toast";
|
||
|
||
const QUESTIONS = [
|
||
{ id: "wifi", emoji: "📶", q: "实际上网速度能到多少？有无高峰限速？" },
|
||
{ id: "noise", emoji: "🔊", q: "晚上安静吗？隔壁会开会/派对吗？" },
|
||
{ id: "desk", emoji: "🪑", q: "是否有独立工位与显示器外接？" },
|
||
{ id: "deposit", emoji: "🔐", q: "押金多久退？扣款条件写清楚了吗？" },
|
||
{ id: "clean", emoji: "🧹", q: "公共区域清洁频率？谁负责厨余？" },
|
||
{ id: "guest", emoji: "👥", q: "访客政策？能否短住朋友？" },
|
||
{ id: "contract", emoji: "📄", q: "最短租期与提前退租违约金？" },
|
||
{ id: "bills", emoji: "💡", q: "水电网是否包？超额怎么算？" },
|
||
];
|
||
|
||
export default function ColivingQuestions() {
|
||
const { toast } = useToast();
|
||
const [checked, setChecked] = useState<string[]>([]);
|
||
useEffect(() => {
|
||
try {
|
||
const raw = localStorage.getItem("nomadro-coliving-q");
|
||
if (raw) setChecked(JSON.parse(raw));
|
||
} catch { /* ignore */ }
|
||
}, []);
|
||
useEffect(() => {
|
||
localStorage.setItem("nomadro-coliving-q", JSON.stringify(checked));
|
||
}, [checked]);
|
||
const toggle = (id: string) => setChecked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
|
||
const copy = async () => {
|
||
const text = QUESTIONS.filter((q) => checked.includes(q.id) || checked.length === 0)
|
||
.map((q, i) => `${i + 1}. ${q.q}`)
|
||
.join("\n");
|
||
await navigator.clipboard.writeText(`Coliving 看房问题：\n${text}`);
|
||
toast("问题清单已复制 📋");
|
||
};
|
||
return (
|
||
<section className="section kit-section" id="coliving-qa">
|
||
<div className="container">
|
||
<div className="section-header reveal">
|
||
<span className="section-tag">🏠 COLIVING Q&A</span>
|
||
<h2>合租看房问题单</h2>
|
||
<p>勾选你要问的，一键复制发给房东/管家</p>
|
||
</div>
|
||
<div className="kit-card reveal">
|
||
<div className="kit-list">
|
||
{QUESTIONS.map((q) => {
|
||
const on = checked.includes(q.id);
|
||
return (
|
||
<button key={q.id} type="button" className={`kit-list-item btnish${on ? " on" : ""}`} onClick={() => toggle(q.id)}>
|
||
<span>{q.emoji}</span>
|
||
<div><strong>{q.q}</strong></div>
|
||
<i>{on ? "✓" : "+"}</i>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="kit-actions">
|
||
<button type="button" className="btn btn-primary" onClick={copy}>复制问题单</button>
|
||
<button type="button" className="btn btn-ghost" onClick={() => setChecked([])}>清空</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|