diff --git a/src/app/tools/embed/customize/tanks/page.tsx b/src/app/tools/embed/customize/breakdown/page.tsx similarity index 81% rename from src/app/tools/embed/customize/tanks/page.tsx rename to src/app/tools/embed/customize/breakdown/page.tsx index 39355d665..827dcb1ca 100644 --- a/src/app/tools/embed/customize/tanks/page.tsx +++ b/src/app/tools/embed/customize/breakdown/page.tsx @@ -3,8 +3,8 @@ import { use } from 'react'; import { EmbedCustomize } from '../../../../../components/EmbedCustomize'; import { - TanksEmbedCard, - TanksEmbedWrapper, + BreakdownEmbedCard, + BreakdownEmbedWrapper, } from '../../../../../components/TanksEmbed'; import { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions'; import { @@ -13,12 +13,18 @@ import { ExtractEmbedConfigType, } from '../../types'; -const tankEmbedConfig = { +const breakdownEmbedConfig = { showTotal: { type: EmbedConfigType.Boolean, default: true }, listWidth: { type: EmbedConfigType.Slider, default: 320, min: 128, max: 640 }, listGap: { type: EmbedConfigType.Size, default: '2' }, - listMaxTanks: { type: EmbedConfigType.Number, default: 4, pad: true }, + listMaxTanks: { + type: EmbedConfigType.Slider, + default: 4, + min: 0, + max: 8, + pad: true, + }, cardRadius: { type: EmbedConfigType.Radius, default: '2' }, cardHeaderBackgroundColor: { @@ -59,22 +65,24 @@ const tankEmbedConfig = { column4Label: { type: EmbedConfigType.String, default: 'Damage' }, } satisfies EmbedConfig; -export type TanksEmbedState = ExtractEmbedConfigType; +export type BreakdownEmbedState = ExtractEmbedConfigType< + typeof breakdownEmbedConfig +>; export default function Page() { const tanks = use(tanksDefinitionsArray); return ( ( - - {state.showTotal && } + + {state.showTotal && } {tanks.slice(0, state.listMaxTanks).map((tank) => ( - + ))} - + )} /> ); diff --git a/src/components/EmbedCustomize.tsx b/src/components/EmbedCustomize.tsx index 696670985..813519ef6 100644 --- a/src/components/EmbedCustomize.tsx +++ b/src/components/EmbedCustomize.tsx @@ -1,16 +1,10 @@ import * as radixColors from '@radix-ui/colors'; -import { - BorderSolidIcon, - Cross1Icon, - ImageIcon, - SquareIcon, -} from '@radix-ui/react-icons'; +import { ImageIcon } from '@radix-ui/react-icons'; import { Box, Button, Flex, Heading, - IconButton, ScrollArea, Select, Slider, @@ -89,15 +83,6 @@ export function EmbedCustomize({ Customize - - {Object.entries(config).map(([keyUntyped, setting]) => { const key = keyUntyped as keyof ( | Immutable> @@ -577,25 +562,22 @@ export function EmbedCustomize({ > Example preview - - - - - - - - - - - +