簡易レジの作成 (#26)

app/components/organisms/reception/Calculator.tsx

@@ -0,0 +1,45 @@
+import { Box, Button, HStack, Text, VStack } from "@chakra-ui/react"
+import { FC, memo } from "react"
+
+export const Calculator: FC = memo(() => {
+  return (
+    <Box
+      w="300px"
+      h="250px"
+      bg="blackAlpha.500"
+      borderRadius="10px"
+      shadow="lg"
+      p={4}
+    >
+      <VStack>
+        <Text></Text>
+        <HStack>
+          <Button>7</Button>
+          <Button>8</Button>
+          <Button>9</Button>
+          <Button>*</Button>
+        </HStack>
+        <HStack>
+          <Button>4</Button>
+          <Button>5</Button>
+          <Button>6</Button>
+          <Button>-</Button>
+        </HStack>
+        <HStack>
+          <Button>1</Button>
+          <Button>2</Button>
+          <Button>3</Button>
+          <Button>+</Button>
+        </HStack>
+        <HStack>
+          <Button>0</Button>
+          <Button>T</Button>
+          <Button>C</Button>
+          <Button>=</Button>
+        </HStack>
+      </VStack>
+    </Box>
+  )
+})
+
+Calculator.displayName = "Calculator"

app/routes/reception.tsx

@@ -14,12 +14,14 @@ import {
   Stack,
   Text,
   useDisclosure,
+  VStack,
   Wrap,
   WrapItem,
 } from "@chakra-ui/react"
 import { ActionFunction, ActionFunctionArgs, json } from "@remix-run/node"
 import { Form, useActionData, useLoaderData } from "@remix-run/react"
 import { useEffect, useState } from "react"
+import { Calculator } from "~/components/organisms/reception/Calculator"
 import { ReceptionCard } from "~/components/organisms/reception/ReceptionCard"
 import { createOrderDetail } from "~/crud/crud_details"
 import { createOrder } from "~/crud/crud_orders"
@@ -195,34 +197,37 @@ export default function Reception() {
         <ModalContent pb={2}>
           <ModalCloseButton />
           <ModalBody mx={4}>
-            <Stack spacing={4}>
-              <FormControl>
-                <Heading fontSize="1.75rem" mb={4}>
-                  注文内容
-                </Heading>
-                <Stack spacing={3}>
-                  {order.map((item) => (
-                    <Stack key={item.product_id} spacing={0}>
-                      <Text>
-                        商品名：{item.product_name} 商品ID：{item.product_id}
-                      </Text>
-                      <Text>数量：{item.quantity}</Text>
-                    </Stack>
-                  ))}
-                </Stack>
-                <Text>--------------------------------------------</Text>
-                <Text>合計：{total}円</Text>
-                <Text>
-                  テーブル番号：
-                  <Input
-                    type="number"
-                    onChange={tableNumberChange}
-                    value={tableNumber}
-                    bg="gray.300"
-                  />
-                </Text>
-              </FormControl>
-            </Stack>
+            <VStack>
+              <Stack spacing={4}>
+                <FormControl>
+                  <Heading fontSize="1.75rem" mb={4}>
+                    注文内容
+                  </Heading>
+                  <Stack spacing={3}>
+                    {order.map((item) => (
+                      <Stack key={item.product_id} spacing={0}>
+                        <Text>
+                          商品名：{item.product_name} 商品ID：{item.product_id}
+                        </Text>
+                        <Text>数量：{item.quantity}</Text>
+                      </Stack>
+                    ))}
+                  </Stack>
+                  <Text>--------------------------------------------</Text>
+                  <Text>合計：{total}円</Text>
+                  <Text>
+                    テーブル番号：
+                    <Input
+                      type="number"
+                      onChange={tableNumberChange}
+                      value={tableNumber}
+                      bg="gray.300"
+                    />
+                  </Text>
+                </FormControl>
+              </Stack>
+              <Calculator />
+            </VStack>
           </ModalBody>
           <ModalFooter gap={4}>
             <Form method="post">