diff --git a/src/components/organisms/Variables.tsx b/src/components/organisms/Variables.tsx index 556e017c..fbec9445 100644 --- a/src/components/organisms/Variables.tsx +++ b/src/components/organisms/Variables.tsx @@ -1,4 +1,4 @@ -import { Box, Table, TableCaption, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react'; +import { Box, Table, TableCaption, TableContainer, Tbody, Td, Th, Thead, Tr, VStack } from '@chakra-ui/react'; import React from 'react'; import type { Character } from '../../app/lib/Character'; @@ -21,32 +21,49 @@ const penStateJapanese = (penDown: boolean): string => { export const Variables: React.FC = ({ characters }) => { return ( - - - キャラクター - - - - - - - - - - - {characters?.map((character) => ( - - - - - - + + +
変数名名前線の色向きペンの状態
{character.name} - - {directionJapanese[character.direction]}{penStateJapanese(character.penDown)}
+ キャラクター + + + + + + + - ))} - -
変数名名前線の色向きペンの状態
-
+ + + {characters?.map((character) => ( + + + {character.name} + + + + {directionJapanese[character.direction]} + {penStateJapanese(character.penDown)} + + ))} + + + + + + 変数 + + + + + + + + + + +
変数名
+
+ ); };