From 7e0e3527e9cf7bf781b8ef0b74b5518802662d00 Mon Sep 17 00:00:00 2001
From: jiawei <jiaweizhang927@gmail.com>
Date: Sun, 30 Aug 2026 16:44:28 +0800
Subject: [PATCH] fix(chapter3): use shadcn button variants in state demo

Replace the Ant Design dashed button type with the shadcn outline variant and include the state demo on the demo page.
---
 chapter3/src/app/demo/_components/state.tsx | 32 +++++++++++++++++++++
 chapter3/src/app/demo/page.tsx              |  4 +++
 2 files changed, 36 insertions(+)
 create mode 100644 chapter3/src/app/demo/_components/state.tsx

diff --git a/chapter3/src/app/demo/_components/state.tsx b/chapter3/src/app/demo/_components/state.tsx
new file mode 100644
index 0000000..7ab37ed
--- /dev/null
+++ b/chapter3/src/app/demo/_components/state.tsx
@@ -0,0 +1,32 @@
+// src/app/demo/_components/state.tsx
+'use client';
+
+import { Button } from '@/app/_components/shadcn/ui/button';
+import { FC, useState } from 'react';
+import clsx from 'clsx';
+
+import $styles from './style.module.css';
+
+const StateDemo: FC = () => {
+    const [count, setCount] = useState(1);
+    const [isShow, toggleShow] = useState(true);
+
+    return (
+        <div className={clsx($styles.container, 'w-[20rem]')}>
+            <h2 className="text-center">useState Demo</h2>
+            {isShow && <p className="text-center py-5">{count}</p>}
+            <div className="flex justify-around">
+                <Button onClick={() => setCount(count + 1)} variant="outline">
+                    增加
+                </Button>
+                <Button onClick={() => setCount(count - 1)} variant="outline">
+                    减少
+                </Button>
+                <Button onClick={() => toggleShow(!isShow)} variant="outline">
+                    {isShow ? '显示' : '隐藏'}
+                </Button>
+            </div>
+        </div>
+    );
+};
+export default StateDemo;
diff --git a/chapter3/src/app/demo/page.tsx b/chapter3/src/app/demo/page.tsx
index 29ffffd..e178c78 100644
--- a/chapter3/src/app/demo/page.tsx
+++ b/chapter3/src/app/demo/page.tsx
@@ -2,6 +2,7 @@
 // ...
 import { FC } from 'react';
 import { Button } from 'antd';
+import StateDemo from './_components/state';
 
 import $styles from './page.module.css';
 
@@ -15,6 +16,9 @@ const DemoPage: FC = () => (
                         3R教室
                     </Button>
                 </div>
+                <div className={$styles.demo}>
+                    <StateDemo />
+                </div>
             </div>
         </div>
     </div>