feat: start of embeds

src/components/EmbedConfigInputs.tsx

@@ -0,0 +1,115 @@
+import { Flex, Select, Text, TextField } from '@radix-ui/themes';
+import { produce } from 'immer';
+import { capitalize, startCase, times } from 'lodash';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import {
+  EmbedConfig,
+  EmbedConfigType,
+  ExtractEmbedConfigType,
+  RadixRadius,
+  RadixSize,
+} from '../app/tools/embed/types';
+
+interface EmbedConfigInputsProps {
+  config: EmbedConfig;
+  state: ExtractEmbedConfigType<EmbedConfig>;
+  setState: Dispatch<SetStateAction<ExtractEmbedConfigType<EmbedConfig>>>;
+}
+
+export function EmbedConfigInputs({
+  config,
+  state,
+  setState,
+}: EmbedConfigInputsProps) {
+  const mutateState = useCallback(
+    (recipe: (draft: ExtractEmbedConfigType<EmbedConfig>) => void) => {
+      setState(produce(recipe));
+    },
+    [],
+  );
+
+  return (
+    <Flex direction="column" gap="2" align="end">
+      {Object.entries(config).map(([key, setting]) => {
+        const name = capitalize(startCase(key));
+
+        switch (setting.type) {
+          case EmbedConfigType.Number: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>{name}</Text>
+                <TextField.Root
+                  style={{ width: 96 }}
+                  type="number"
+                  value={state[key]}
+                  onChange={(event) => {
+                    mutateState((draft) => {
+                      draft[key] = (
+                        event.target as HTMLInputElement
+                      ).valueAsNumber;
+                    });
+                  }}
+                >
+                  {setting.unit && (
+                    <TextField.Slot side="right">px</TextField.Slot>
+                  )}
+                </TextField.Root>
+              </Flex>
+            );
+          }
+
+          case EmbedConfigType.Size: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>{name}</Text>
+                <Select.Root
+                  value={state[key] as RadixSize}
+                  onValueChange={(value) => {
+                    mutateState((draft) => {
+                      draft[key] = value as RadixSize;
+                    });
+                  }}
+                >
+                  <Select.Trigger />
+                  <Select.Content>
+                    {times(10, (index) => (
+                      <Select.Item key={index} value={`${index}`}>
+                        {index}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Root>
+              </Flex>
+            );
+          }
+
+          case EmbedConfigType.Radius: {
+            return (
+              <Flex align="center" gap="2">
+                <Text>Card radius</Text>
+                <Select.Root
+                  value={state[key] as RadixRadius}
+                  onValueChange={(value) => {
+                    mutateState((draft) => {
+                      draft[key] = value as RadixRadius;
+                    });
+                  }}
+                >
+                  <Select.Trigger />
+                  <Select.Content>
+                    {times(5, (index) => (
+                      <Select.Item key={index} value={`${index}`}>
+                        {index}
+                      </Select.Item>
+                    ))}
+                    <Select.Item value="full">Full</Select.Item>
+                  </Select.Content>
+                </Select.Root>
+              </Flex>
+            );
+          }
+        }
+      })}
+    </Flex>
+  );
+}

src/components/Party3.tsx

@@ -34,11 +34,11 @@ export function Party3() {
       /> */}
 
       {/* pub center */}
-      <script
+      {/* <script
         async
         src="https://adsdk.microsoft.com/mmnow/sdk.js?siteId=364645&publisherId=253617120"
         crossOrigin="anonymous"
-      />
+      /> */}
     </>
   );
 }

src/components/TanksEmbed.tsx

@@ -0,0 +1,46 @@
+import { Flex } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { TanksEmbedState } from '../app/tools/embed/customize/tanks/page';
+import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+
+interface TanksEmbedWrapperProps {
+  children: ReactNode;
+  state: TanksEmbedState;
+}
+
+export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
+  return (
+    <Flex direction="column" gap={state.listGap} width={`${state.listWidth}px`}>
+      {children}
+    </Flex>
+  );
+}
+
+interface TanksEmbedCardProps {
+  tank: TankDefinition;
+  state: TanksEmbedState;
+}
+
+export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
+  return (
+    <Flex
+      direction="column"
+      style={{
+        borderRadius: `var(--radius-${state.cardRadius})`,
+        overflow: 'hidden',
+        backgroundColor: 'var(--color-panel-solid)',
+      }}
+    >
+      <Flex
+        justify="center"
+        style={{
+          backgroundColor: 'var(--color-panel-translucent)',
+        }}
+        p={state.cardHeaderPadding}
+      >
+        {tank.name}
+      </Flex>
+      <Flex>asd</Flex>
+    </Flex>
+  );
+}