diff --git a/src/commands/ownedTanks.tsx b/src/commands/ownedTanks.tsx
index 752ba3d56..370e3165f 100644
--- a/src/commands/ownedTanks.tsx
+++ b/src/commands/ownedTanks.tsx
@@ -90,7 +90,6 @@ export const ownedTanksCommand: CommandRegistry = {
`https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
);
const leftColumnSize = Math.ceil(tanks.length / 2);
- const rightColumnSize = tanks.length - leftColumnSize;
const leftColumn = tanks.slice(0, leftColumnSize);
const rightColumn = tanks.slice(leftColumnSize);
@@ -114,16 +113,32 @@ export const ownedTanksCommand: CommandRegistry = {
{tanks.length > 0 && (
- {await Promise.all(
- tanks.map(async (tank) => (
-
- )),
- )}
+
+ {await Promise.all(
+ leftColumn.map(async (tank) => (
+
+ )),
+ )}
+
+
+ {await Promise.all(
+ rightColumn.map(async (tank) => (
+
+ )),
+ )}
+
)}
diff --git a/src/components/Tanks/components/Column.tsx b/src/components/Tanks/components/Column.tsx
new file mode 100644
index 000000000..cd163ed27
--- /dev/null
+++ b/src/components/Tanks/components/Column.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+ children: ReactNode;
+}
+
+export function Column({ children }: RootProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/Tanks/components/Item.tsx b/src/components/Tanks/components/Item.tsx
index b37b49a68..239dd4cab 100644
--- a/src/components/Tanks/components/Item.tsx
+++ b/src/components/Tanks/components/Item.tsx
@@ -1,38 +1,62 @@
-import { TANK_ICONS } from '../../../core/blitz/tankopedia.js';
+import {
+ TANK_ICONS,
+ TANK_ICONS_PREMIUM,
+} from '../../../core/blitz/tankopedia.js';
+import { theme, themeAmber } from '../../../stitches.config.js';
export interface ItemProps {
- icon?: string;
+ image?: string;
type?: string;
name: string;
+ isPremium?: boolean;
}
-export function Item({ icon, type, name }: ItemProps) {
+export function Item({ image, type, name, isPremium }: ItemProps) {
return (
- {icon &&

}
-
-
+
{type && (
-

+

)}
-
{name}
+
+ {image &&

}
);
}
diff --git a/src/components/Tanks/components/Root.tsx b/src/components/Tanks/components/Root.tsx
index 1a23e18ea..9d47b099f 100644
--- a/src/components/Tanks/components/Root.tsx
+++ b/src/components/Tanks/components/Root.tsx
@@ -9,10 +9,7 @@ export function Root({ children }: RootProps) {
{children}
diff --git a/src/components/Tanks/index.ts b/src/components/Tanks/index.ts
index 9ac57386e..4f3bf3609 100644
--- a/src/components/Tanks/index.ts
+++ b/src/components/Tanks/index.ts
@@ -1,2 +1,3 @@
+export * from './components/Column.js';
export * from './components/Item.js';
export * from './components/Root.js';
diff --git a/src/core/blitz/tankopedia.ts b/src/core/blitz/tankopedia.ts
index 54174548c..7401a2db0 100644
--- a/src/core/blitz/tankopedia.ts
+++ b/src/core/blitz/tankopedia.ts
@@ -35,6 +35,13 @@ export const TANK_ICONS: Record = {
heavyTank: 'https://i.imgur.com/ECeqlZa.png',
};
+export const TANK_ICONS_PREMIUM: Record = {
+ 'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
+ lightTank: 'https://i.imgur.com/zdkpTRb.png',
+ mediumTank: 'https://i.imgur.com/3z7eHX6.png',
+ heavyTank: 'https://i.imgur.com/P3vbmyA.png',
+};
+
export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
export const TIER_ROMAN_NUMERALS: Record = {
diff --git a/src/stitches.config.ts b/src/stitches.config.ts
index c7f27bdff..c6190584b 100644
--- a/src/stitches.config.ts
+++ b/src/stitches.config.ts
@@ -1,4 +1,4 @@
-import { slate, slateDark } from '@radix-ui/colors';
+import { amberDark, slate, slateDark } from '@radix-ui/colors';
import { createBorderStyles, createColors } from 'bepaint';
// this isn't really a stitches config, but the object is compliant
@@ -7,3 +7,4 @@ export const theme = {
borderStyles: createBorderStyles(slateDark),
};
export const themeLight = { colors: createColors(slate) };
+export const themeAmber = { colors: createColors(amberDark) };