diff --git a/packages/website/src/components/Embeds/breakdown.tsx b/packages/website/src/components/Embeds/breakdown.tsx index 3ebda3bea..1f19c877c 100644 --- a/packages/website/src/components/Embeds/breakdown.tsx +++ b/packages/website/src/components/Embeds/breakdown.tsx @@ -30,5 +30,13 @@ export function BreakdownPreview() { export function BreakdownRenderer() { const { useState } = useEmbedStateCurry(); - return useState('cardBodyBackgroundColor'); + return ( + + {useState('showTotal') && } + + {tanks.slice(0, useState('listMaxTanks')).map((tank) => ( + + ))} + + ); } diff --git a/packages/website/src/pages/tools/embed/[embed]/host/_index.tsx b/packages/website/src/pages/tools/embed/[embed]/host/_index.tsx index e880b9aa0..1cb3ab97c 100644 --- a/packages/website/src/pages/tools/embed/[embed]/host/_index.tsx +++ b/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 ( - + ); } + +function Content({ embed }: PageProps) { + const Renderer = embedRenderers[embed]; + const { useState } = useEmbedStateCurry(); + const width = useState('width'); + const height = useState('height'); + + return ( + + + + + + ); +}