feat: float

src/components/TanksEmbed.tsx

@@ -1,6 +1,12 @@
-import { Flex } from '@radix-ui/themes';
+import { Flex, Text } from '@radix-ui/themes';
+import { times } from 'lodash';
 import { ReactNode } from 'react';
 import { TanksEmbedState } from '../app/tools/embed/customize/tanks/page';
+import {
+  toColorVar,
+  toRadiusVar,
+  toWidthVar,
+} from '../app/tools/embed/utilities';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
 
 interface TanksEmbedWrapperProps {
@@ -10,7 +16,11 @@ interface TanksEmbedWrapperProps {
 
 export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
   return (
-    <Flex direction="column" gap={state.listGap} width={`${state.listWidth}px`}>
+    <Flex
+      direction="column"
+      gap={state.listGap}
+      width={toWidthVar(state.listWidth)}
+    >
       {children}
     </Flex>
   );
@@ -26,21 +36,42 @@ export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
     <Flex
       direction="column"
       style={{
-        borderRadius: `var(--radius-${state.cardRadius})`,
+        borderRadius: toRadiusVar(state.cardRadius),
         overflow: 'hidden',
-        backgroundColor: 'var(--color-panel-solid)',
+        backgroundColor: toColorVar(state.cardBodyBackgroundColor),
       }}
     >
       <Flex
         justify="center"
         style={{
-          backgroundColor: 'var(--color-panel-translucent)',
+          backgroundColor: toColorVar(state.cardHeaderBackgroundColor),
         }}
         p={state.cardHeaderPadding}
       >
         {tank.name}
       </Flex>
-      <Flex>asd</Flex>
+
+      <Flex p={state.cardBodyPadding}>
+        {times(4, (index) => {
+          const column = (index + 1) as 1 | 2 | 3 | 4;
+
+          return (
+            <Flex
+              direction="column"
+              align="center"
+              gap={state.columnGap}
+              flexGrow="1"
+            >
+              <Text size={state.columnValueSize} color={state.columnValueColor}>
+                70{state[`column${column}Unit`]}
+              </Text>
+              <Text size={state.columnLabelSize} color={state.columnLabelColor}>
+                {state[`column${column}Label`]}
+              </Text>
+            </Flex>
+          );
+        })}
+      </Flex>
     </Flex>
   );
 }