Mission 3: Workshop — Counter

เป้าหมายของ Mission นี้: สร้าง Counter ที่กด +, -, และ Reset ได้

flowchart LR
    B1["ปุ่ม +"] --> S["count"]
    B2["ปุ่ม -"] --> S
    B3["ปุ่ม Reset"] --> S
    S --> D["แสดงผลบนจอ"]

สิ่งที่ต้องทำ

สร้าง component ที่มี:

1. ตัวเลขแสดงค่าปัจจุบัน
2. ปุ่ม + เพิ่มค่าทีละ 1
3. ปุ่ม - ลดค่าทีละ 1
4. ปุ่ม Reset กลับไปที่ 0

จุดเริ่มต้น (ลองเติมส่วนที่เหลือเอง)

"use client";
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p className="text-2xl font-bold">{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      {/* TODO: เพิ่มปุ่ม - และ Reset */}
    </div>
  );
}

ลองวางไว้ในหน้า Home เพื่อทดสอบดู