45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useState } from "react";
|
||
|
||
export default function SleepWindDown() {
|
||
const [wake, setWake] = useState(7);
|
||
const [cycles, setCycles] = useState(5);
|
||
const bed = useMemo(() => {
|
||
// 90min cycles + 15min fall asleep
|
||
const totalMin = cycles * 90 + 15;
|
||
let h = wake - totalMin / 60;
|
||
while (h < 0) h += 24;
|
||
const hh = Math.floor(h);
|
||
const mm = Math.round((h - hh) * 60);
|
||
return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
|
||
}, [wake, cycles]);
|
||
return (
|
||
<section className="section kit-section" id="sleep">
|
||
<div className="container">
|
||
<div className="section-header reveal">
|
||
<span className="section-tag">😴 SLEEP</span>
|
||
<h2>睡眠周期入睡点</h2>
|
||
<p>按起床时间倒推，睡够完整周期少浑噩</p>
|
||
</div>
|
||
<div className="kit-card reveal">
|
||
<label className="kit-field"><span>想几点起 {String(wake).padStart(2, "0")}:00</span>
|
||
<input type="range" min={5} max={11} value={wake} onChange={(e) => setWake(+e.target.value)} />
|
||
</label>
|
||
<label className="kit-field"><span>睡眠周期 {cycles} × 90 分钟</span>
|
||
<input type="range" min={3} max={6} value={cycles} onChange={(e) => setCycles(+e.target.value)} />
|
||
</label>
|
||
<div className="kit-hero">
|
||
<span>🛏️</span>
|
||
<div>
|
||
<small>建议入睡</small>
|
||
<strong>{bed}</strong>
|
||
<p>含约 15 分钟入睡缓冲 · 共约 {cycles * 1.5} 小时</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|