75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
|
||
const MOODS = [
|
||
{ key: "flow", emoji: "🌊", label: "心流" },
|
||
{ key: "ok", emoji: "🙂", label: "平稳" },
|
||
{ key: "tired", emoji: "😴", label: "疲惫" },
|
||
{ key: "anxious", emoji: "😰", label: "焦虑" },
|
||
{ key: "lonely", emoji: "🌑", label: "孤单" },
|
||
{ key: "excited", emoji: "✨", label: "兴奋" },
|
||
];
|
||
|
||
const TIPS: Record<string, string> = {
|
||
flow: "保持节奏，结束时写下今天的小胜利",
|
||
ok: "适合处理琐事与规划下周",
|
||
tired: "缩短会议，优先睡眠与补水",
|
||
anxious: "出去走走 20 分钟，或发消息给一位朋友",
|
||
lonely: "去联合办公或咖啡馆坐一会儿，找人气",
|
||
excited: "把冲劲用在一件重要推进上",
|
||
};
|
||
|
||
export default function NomadMoodCheck() {
|
||
const [mood, setMood] = useState("ok");
|
||
const [note, setNote] = useState("");
|
||
const [saved, setSaved] = useState(false);
|
||
useEffect(() => {
|
||
try {
|
||
const raw = localStorage.getItem("nomadro-mood");
|
||
if (raw) {
|
||
const s = JSON.parse(raw) as { mood?: string; note?: string; day?: string };
|
||
if (s.day === new Date().toDateString()) {
|
||
if (s.mood) setMood(s.mood);
|
||
if (s.note) setNote(s.note);
|
||
setSaved(true);
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
}, []);
|
||
const save = () => {
|
||
localStorage.setItem("nomadro-mood", JSON.stringify({
|
||
mood, note, day: new Date().toDateString(),
|
||
}));
|
||
setSaved(true);
|
||
};
|
||
return (
|
||
<section className="section kit-section" id="mood">
|
||
<div className="container">
|
||
<div className="section-header reveal">
|
||
<span className="section-tag">🪞 MOOD</span>
|
||
<h2>游民心情签到</h2>
|
||
<p>旅居情绪也需要被看见，一分钟记录就好</p>
|
||
</div>
|
||
<div className="kit-card reveal">
|
||
<div className="kit-chips wrap">
|
||
{MOODS.map((m) => (
|
||
<button key={m.key} type="button" className={`kit-chip${mood === m.key ? " active" : ""}`} onClick={() => setMood(m.key)}>
|
||
{m.emoji} {m.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<p className="kit-note">{TIPS[mood]}</p>
|
||
<label className="kit-field">
|
||
<span>一句话（可选）</span>
|
||
<input value={note} onChange={(e) => setNote(e.target.value)} placeholder="今天最想记住的事…" maxLength={80} />
|
||
</label>
|
||
<div className="kit-actions">
|
||
<button type="button" className="btn btn-primary" onClick={save}>{saved ? "已保存，再更新" : "保存今日心情"}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|