feat: rename to breakdown

src/app/tools/embed/customize/breakdown/page.tsx

@@ -3,8 +3,8 @@
 import { use } from 'react';
 import { EmbedCustomize } from '../../../../../components/EmbedCustomize';
 import {
-  TanksEmbedCard,
+  BreakdownEmbedCard,
-  TanksEmbedWrapper,
+  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<typeof tankEmbedConfig>;
+export type BreakdownEmbedState = ExtractEmbedConfigType<
+  typeof breakdownEmbedConfig
+>;
 
 export default function Page() {
   const tanks = use(tanksDefinitionsArray);
 
   return (
     <EmbedCustomize
-      config={tankEmbedConfig}
+      config={breakdownEmbedConfig}
       preview={(state) => (
-        <TanksEmbedWrapper state={state}>
+        <BreakdownEmbedWrapper state={state}>
-          {state.showTotal && <TanksEmbedCard state={state} tank={null} />}
+          {state.showTotal && <BreakdownEmbedCard state={state} tank={null} />}
 
           {tanks.slice(0, state.listMaxTanks).map((tank) => (
-            <TanksEmbedCard key={tank.id} tank={tank} state={state} />
+            <BreakdownEmbedCard key={tank.id} tank={tank} state={state} />
           ))}
-        </TanksEmbedWrapper>
+        </BreakdownEmbedWrapper>
       )}
     />
   );

src/components/EmbedCustomize.tsx

@@ -1,16 +1,10 @@
 import * as radixColors from '@radix-ui/colors';
-import {
+import { ImageIcon } from '@radix-ui/react-icons';
-  BorderSolidIcon,
-  Cross1Icon,
-  ImageIcon,
-  SquareIcon,
-} from '@radix-ui/react-icons';
 import {
   Box,
   Button,
   Flex,
   Heading,
-  IconButton,
   ScrollArea,
   Select,
   Slider,
@@ -89,15 +83,6 @@ export function EmbedCustomize<Config extends EmbedConfig>({
           <Flex direction="column" gap="2" p="4">
             <Heading mb="4">Customize</Heading>
 
-            <Button
-              variant="outline"
-              color="gray"
-              mb="6"
-              onClick={() => fileInput.current?.click()}
-            >
-              <ImageIcon /> Upload test background
-            </Button>
-
             {Object.entries(config).map(([keyUntyped, setting]) => {
               const key = keyUntyped as keyof (
                 | Immutable<ExtractEmbedConfigType<Config>>
@@ -577,25 +562,22 @@ export function EmbedCustomize<Config extends EmbedConfig>({
           >
             <Flex
               justify="between"
+              align="center"
               p="2"
-              px="3"
+              pl="3"
               style={{
                 backgroundColor: 'var(--color-panel-solid)',
               }}
             >
               <Text color="gray">Example preview</Text>
 
-              <Flex align="center" gap="3">
+              <Button
-                <IconButton color="gray" disabled size="1" variant="ghost">
+                variant="outline"
-                  <BorderSolidIcon />
+                color="gray"
-                </IconButton>
+                onClick={() => fileInput.current?.click()}
-                <IconButton color="gray" disabled size="1" variant="ghost">
+              >
-                  <SquareIcon />
+                <ImageIcon /> Upload test background
-                </IconButton>
+              </Button>
-                <IconButton color="gray" disabled size="1" variant="ghost">
-                  <Cross1Icon />
-                </IconButton>
-              </Flex>
             </Flex>
 
             <Flex

src/components/TanksEmbed.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@radix-ui/themes';
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { TanksEmbedState } from '../app/tools/embed/customize/tanks/page';
+import { BreakdownEmbedState } from '../app/tools/embed/customize/breakdown/page';
 import {
   toColorVar,
   toRadiusVar,
@@ -13,12 +13,15 @@ import { ClassLight } from './ClassIcon/components/ClassLight';
 import { ClassMedium } from './ClassIcon/components/ClassMedium';
 import { ClassTankDestroyer } from './ClassIcon/components/ClassTankDestroyer';
 
-interface TanksEmbedWrapperProps {
+interface BreakdownEmbedWrapperProps {
   children: ReactNode;
-  state: TanksEmbedState;
+  state: BreakdownEmbedState;
 }
 
-export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
+export function BreakdownEmbedWrapper({
+  children,
+  state,
+}: BreakdownEmbedWrapperProps) {
   return (
     <Flex
       direction="column"
@@ -30,12 +33,12 @@ export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
   );
 }
 
-interface TanksEmbedCardProps {
+interface BreakdownEmbedCardProps {
   tank: TankDefinition | null;
-  state: TanksEmbedState;
+  state: BreakdownEmbedState;
 }
 
-export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
+export function BreakdownEmbedCard({ tank, state }: BreakdownEmbedCardProps) {
   const { color: cardTitleColor, ...restCardTitleProps } = state.cardTitle;
   return (
     <Flex