Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x 9x 9x 9x 9x 9x 9x 9x 3x 3x 9x 1x 1x 5x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x | import Link from "next/link";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
const reset = () => setCount(0);
const getCounterColor = () => {
if (count > 0) {
return "#0070f3";
}
if (count < 0) {
return "#ff4444";
}
return "#333";
};
return (
<div
style={{
padding: "2rem",
fontFamily: "Arial, sans-serif",
textAlign: "center",
}}
>
<h1>Stream Counter</h1>
<div style={{ margin: "2rem 0" }}>
<div
data-testid="counter-value"
style={{
fontSize: "3rem",
fontWeight: "bold",
margin: "1rem 0",
color: getCounterColor(),
}}
>
{count}
</div>
</div>
<div
style={{
display: "flex",
gap: "1rem",
justifyContent: "center",
margin: "2rem 0",
}}
>
<button
onClick={decrement}
style={{
padding: "0.5rem 1rem",
fontSize: "1rem",
backgroundColor: "#ff4444",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
減少
</button>
<button
onClick={reset}
style={{
padding: "0.5rem 1rem",
fontSize: "1rem",
backgroundColor: "#666",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
リセット
</button>
<button
onClick={increment}
style={{
padding: "0.5rem 1rem",
fontSize: "1rem",
backgroundColor: "#00aa44",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer",
}}
>
増加
</button>
</div>
<Link
href="/"
style={{
color: "#0070f3",
textDecoration: "none",
fontSize: "1rem",
}}
>
← ホームに戻る
</Link>
</div>
);
}
|