feat: state passing

packages/website/src/components/Embeds/breakdown.tsx

@@ -30,5 +30,13 @@ export function BreakdownPreview() {
 export function BreakdownRenderer() {
   const { useState } = useEmbedStateCurry<typeof breakdownConfig>();
 
-  return useState('cardBodyBackgroundColor');
+  return (
+    <BreakdownEmbedWrapper>
+      {useState('showTotal') && <BreakdownEmbedCard tank={null} />}
+
+      {tanks.slice(0, useState('listMaxTanks')).map((tank) => (
+        <BreakdownEmbedCard key={tank.id} tank={tank} />
+      ))}
+    </BreakdownEmbedWrapper>
+  );
 }

packages/website/src/pages/tools/embed/[embed]/host/_index.tsx

@@ -1,5 +1,7 @@
+import { Box } from '@radix-ui/themes';
 import { useMemo } from 'react';
 import { parse } from 'urlon';
+import { BlitzKitTheme } from '../../../../../components/BlitzKitTheme';
 import {
   embedConfigurations,
   embedRenderers,
@@ -10,6 +12,7 @@ import {
   type EmbedConfig,
   type ExtractEmbedConfigTypes,
 } from '../../../../../stores/embedState';
+import { useEmbedStateCurry } from '../../../../../stores/embedState/utilities';
 
 interface PageProps {
   embed: keyof typeof embedConfigurations;
@@ -27,11 +30,25 @@ export function Page({ embed }: PageProps) {
 
     return state;
   }, [embed]);
-  const Renderer = embedRenderers[embed];
 
   return (
     <EmbedState.Provider data={state}>
-      <Renderer />
+      <Content embed={embed} />
     </EmbedState.Provider>
   );
 }
+
+function Content({ embed }: PageProps) {
+  const Renderer = embedRenderers[embed];
+  const { useState } = useEmbedStateCurry();
+  const width = useState('width');
+  const height = useState('height');
+
+  return (
+    <BlitzKitTheme style={{ background: 'transparent' }}>
+      <Box width={`${width}px`} height={`${height}px`} overflow="hidden">
+        <Renderer />
+      </Box>
+    </BlitzKitTheme>
+  );
+}