feat: new dynamic system

src/components/TanksEmbed.tsx

@@ -1,13 +1,10 @@
 import { Flex, Text } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { BreakdownEmbedState } from '../app/tools/embed/customize/breakdown/page';
-import {
-  toColorVar,
-  toRadiusVar,
-  toWidthVar,
-} from '../app/tools/embed/utilities';
+import { breakdownConfig } from '../app/tools/embed/configurations/breakdown';
+import { toRadiusVar } from '../app/tools/embed/utilities';
 import { TankDefinition } from '../core/blitzkit/tankDefinitions';
+import { useEmbedStateCurry } from '../stores/embedState/utilities';
 import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
 import { ClassLight } from './ClassIcon/components/ClassLight';
 import { ClassMedium } from './ClassIcon/components/ClassMedium';
@@ -15,18 +12,18 @@ import { ClassTankDestroyer } from './ClassIcon/components/ClassTankDestroyer';
 
 interface BreakdownEmbedWrapperProps {
   children: ReactNode;
-  state: BreakdownEmbedState;
 }
 
 export function BreakdownEmbedWrapper({
   children,
-  state,
 }: BreakdownEmbedWrapperProps) {
+  const { useState } = useEmbedStateCurry<typeof breakdownConfig>();
+
   return (
     <Flex
       direction="column"
-      gap={state.listGap}
-      width={toWidthVar(state.listWidth)}
+      gap={useState('listGap')}
+      width={`${useState('listWidth')}px`}
     >
       {children}
     </Flex>
@@ -35,30 +32,33 @@ export function BreakdownEmbedWrapper({
 
 interface BreakdownEmbedCardProps {
   tank: TankDefinition | null;
-  state: BreakdownEmbedState;
 }
 
-export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
-  const { color: cardTitleColor, ...restCardTitleProps } = state.cardTitle;
+export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) {
+  const { useState, useRichText } =
+    useEmbedStateCurry<typeof breakdownConfig>();
+  const { color: cardTitleColor, ...restCardTitleProps } =
+    useState('cardTitle');
+
   return (
     <Flex
       direction="column"
       style={{
-        borderRadius: toRadiusVar(state.cardRadius),
+        borderRadius: toRadiusVar(useState('cardRadius')),
         overflow: 'hidden',
-        backgroundColor: toColorVar(state.cardBodyBackgroundColor),
+        backgroundColor: useState('cardBodyBackgroundColor'),
       }}
     >
       <Flex
         justify="center"
         style={{
-          backgroundColor: toColorVar(state.cardHeaderBackgroundColor),
+          backgroundColor: useState('cardHeaderBackgroundColor'),
         }}
-        p={state.cardHeaderPadding}
+        p={useState('cardHeaderPadding')}
       >
         <Text
-          color={
-            state.cardTitleTypeColor
+          style={{
+            color: useState('cardTitleTypeColor')
               ? tank === null
                 ? cardTitleColor
                 : tank.treeType === 'collector'
@@ -66,12 +66,12 @@ export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
                   : tank.treeType === 'premium'
                     ? 'amber'
                     : cardTitleColor
-              : cardTitleColor
-          }
+              : cardTitleColor,
+          }}
           {...restCardTitleProps}
         >
           <Flex align="center" gap="1">
-            {tank !== null && state.cardTitleClassIcon && (
+            {useState('cardTitleClassIcon') && tank !== null && (
               <>
                 {tank.class === 'lightTank' && (
                   <ClassLight width="1em" height="1em" />
@@ -92,7 +92,7 @@ export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
         </Text>
       </Flex>
 
-      <Flex p={state.cardBodyPadding}>
+      <Flex p={useState('cardBodyPadding')}>
         {times(4, (index) => {
           const column = (index + 1) as 1 | 2 | 3 | 4;
 
@@ -100,14 +100,14 @@ export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
             <Flex
               direction="column"
               align="center"
-              gap={state.columnGap}
+              gap={useState('columnGap')}
               flexGrow="1"
             >
-              <Text {...state.columnValue}>
-                70{state[`column${column}Unit`]}
+              <Text {...useRichText('columnValue')}>
+                70{useState(`column${column}Unit`)}
               </Text>
-              <Text {...state.columnLabel}>
-                {state[`column${column}Label`]}
+              <Text {...useRichText('columnLabel')}>
+                {useState(`column${column}Label`)}
               </Text>
             </Flex>
           );