23 lines
1.2 KiB
React
23 lines
1.2 KiB
React
import React, { useState } from "react";
|
||
import { createRoot } from "react-dom/client";
|
||
|
||
const cards = [
|
||
{ icon: "☀", title: "去看一场日落", detail: "找一个视野开阔的地方，留半小时给天空。" },
|
||
{ icon: "✎", title: "写下三个小确幸", detail: "记录今天让你嘴角上扬的三个瞬间。" },
|
||
{ icon: "♧", title: "散步到一条新街", detail: "不设目的地，走进一条以前没有去过的小路。" },
|
||
];
|
||
|
||
function App() {
|
||
const [card, setCard] = useState(cards[0]);
|
||
const draw = () => setCard(cards[(cards.indexOf(card) + 1) % cards.length]);
|
||
return <main className="page">
|
||
<header><span>WEEKEND NOTE</span><b>VOL. 01</b></header>
|
||
<section className="intro"><small>A LITTLE PLAN FOR TODAY</small><h1>今天，给自己<br /><em>一点小期待。</em></h1></section>
|
||
<article><div className="icon">{card.icon}</div><p>YOUR WEEKEND NOTE</p><h2>{card.title}</h2><div className="rule" /><span>{card.detail}</span></article>
|
||
<button onClick={draw}>换一张灵感 <b>↗</b></button>
|
||
<footer>慢一点，也很好。</footer>
|
||
</main>;
|
||
}
|
||
|
||
createRoot(document.getElementById("root")).render(<App />);
|