build card reorganized

frontend-react/src/components/builds/BuildCard.tsx

@@ -20,6 +20,7 @@ import ViewGear from "./ViewGear"
 import ViewAP from "./ViewAP"
 import MyThemeContext from "../../themeContext"
 import { Build } from "../../types"
+import Gears from "./Gears"
 
 interface BuildCardProps {
   build: Build
@@ -96,6 +97,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
           {build.title}
         </Box>
       )}
+      <Gears build={build} />
       {apView ? <ViewAP build={build} /> : <ViewGear build={build} />}
       <Flex justifyContent="space-between" mt="1em">
         {build.description ? (

frontend-react/src/components/builds/Gears.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { Build } from "../../types"
+import Box from "../elements/Box"
+import GearImage from "./GearImage"
+
+interface GearsProps {
+  build: Build
+}
+
+const Gears: React.FC<GearsProps> = ({ build }) => {
+  if (!build.headgearItem && !build.clothingItem && !build.shoesItem) {
+    return <Box h="30px" />
+  }
+  return (
+    <Box asFlex justifyContent="center">
+      <Box w={build.headgearItem ? "100px" : undefined} mx="2px">
+        <GearImage englishName={build.headgearItem} renderNullIfNoName />
+      </Box>
+      <Box w={build.clothingItem ? "100px" : undefined} mx="2px">
+        <GearImage englishName={build.clothingItem} renderNullIfNoName />
+      </Box>
+      <Box w={build.shoesItem ? "100px" : undefined} mx="2px">
+        <GearImage englishName={build.shoesItem} renderNullIfNoName />
+      </Box>
+    </Box>
+  )
+}
+
+export default Gears

frontend-react/src/components/builds/ViewGear.tsx

@@ -3,53 +3,51 @@ import { Grid } from "@chakra-ui/core"
 import GearImage from "./GearImage"
 import { Build } from "../../types"
 import AbilityIcon from "./AbilityIcon"
+import Box from "../elements/Box"
 
 interface ViewGearProps {
   build: Build
 }
 
+const MARGINX = "3px"
+
 const ViewGear: React.FC<ViewGearProps> = ({ build }) => {
-  const noItems =
-    !build.headgearItem && !build.clothingItem && !build.clothingItem
   return (
-    <Grid
-      gridTemplateColumns={`${noItems ? "" : "75px "} 60px 45px 45px 45px`}
-      gridRowGap="10px"
-      justifyItems="center"
-      alignItems="center"
-      mt="1em"
-    >
-      <GearImage
-        englishName={build.headgearItem}
-        renderNullIfNoName={noItems}
-      />
-      {build.headgear.map((ability, index) => (
-        <AbilityIcon
-          key={index}
-          ability={ability}
-          size={index === 0 ? "MAIN" : "SUB"}
-        />
-      ))}
-      <GearImage
-        englishName={build.clothingItem}
-        renderNullIfNoName={noItems}
-      />
-      {build.clothing.map((ability, index) => (
-        <AbilityIcon
-          key={index}
-          ability={ability}
-          size={index === 0 ? "MAIN" : "SUB"}
-        />
-      ))}
-      <GearImage englishName={build.shoesItem} renderNullIfNoName={noItems} />
-      {build.shoes.map((ability, index) => (
-        <AbilityIcon
-          key={index}
-          ability={ability}
-          size={index === 0 ? "MAIN" : "SUB"}
-        />
-      ))}
-    </Grid>
+    <>
+      <Box asFlex alignItems="center" justifyContent="center">
+        {build.headgear.map((ability, index) => (
+          <Box mx={MARGINX} key={index}>
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+            />
+          </Box>
+        ))}
+      </Box>
+      <Box asFlex alignItems="center" justifyContent="center">
+        {build.clothing.map((ability, index) => (
+          <Box mx={MARGINX} key={index}>
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+            />
+          </Box>
+        ))}
+      </Box>
+      <Box asFlex alignItems="center" justifyContent="center">
+        {build.shoes.map((ability, index) => (
+          <Box mx={MARGINX} key={index}>
+            <AbilityIcon
+              key={index}
+              ability={ability}
+              size={index === 0 ? "MAIN" : "SUB"}
+            />
+          </Box>
+        ))}
+      </Box>
+    </>
   )
 }
 

frontend-react/src/components/elements/Box.tsx

@@ -2,11 +2,20 @@ import React from "react"
 import { Box as ChakraBox, BoxProps } from "@chakra-ui/core"
 
 interface MyBoxProps {
-  children: JSX.Element | JSX.Element[]
+  children?: JSX.Element | JSX.Element[]
+  asFlex?: boolean
 }
 
-const Box: React.FC<BoxProps & MyBoxProps> = ({ children, ...props }) => {
-  return <ChakraBox {...props}>{children}</ChakraBox>
+const Box: React.FC<BoxProps & MyBoxProps> = ({
+  children,
+  asFlex,
+  ...props
+}) => {
+  return (
+    <ChakraBox display={asFlex ? "flex" : undefined} {...props}>
+      {children}
+    </ChakraBox>
+  )
 }
 
 export default Box