カウンタ追加

Author: mtbyk

src/App.tsx

@@ -3,6 +3,7 @@ import { Template } from './components/Template'
 import { Box, Flex } from '@chakra-ui/react'
 import { HelloWorld } from './components/HelloWorld'
 import { Home } from './components/Home'
+import { Counter } from './components/Counter'
 
 function App() {
   return (
@@ -25,6 +26,9 @@ function App() {
             <Link to="/hello" color="white">
               Hello
             </Link>
+            <Link to="/counter" color="white">
+              Counter
+            </Link>
           </Flex>
 
           {/* 各ページを表示するエリア */}
@@ -33,6 +37,7 @@ function App() {
               <Route path="/" element={<Home />} />
               <Route path="/template" element={<Template />} />
               <Route path="/hello" element={<HelloWorld />} />
+              <Route path="/counter" element={<Counter />} />
             </Routes>
           </Box>
         </Box>

src/components/Counter.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Box, VStack, Text, Center } from "@chakra-ui/react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <Center h="100vh">
+      <VStack
+        w="auto"
+        h="auto"
+        padding={'40px 80px'}
+        justifyContent="center"
+        border="1px solid white"
+        borderRadius="10px"
+        gap={'20px'}
+      >
+        <Text fontSize="8xl" fontWeight="bold">
+          {count}
+        </Text>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          gap="20px"
+        >
+          <button onClick={() => setCount(count + 1)}>
+            <Text fontSize="6xl" fontWeight="bold">
+              +
+            </Text>
+          </button>
+          <button onClick={() => setCount(count - 1)}>
+            <Text fontSize="6xl" fontWeight="bold">
+              -
+            </Text>
+          </button>
+        </Box>
+      </VStack>
+    </Center>
+  );
+}