feat: applied new renderer to ownedtanks

src/components/PoweredByWargaming.tsx

@@ -0,0 +1,15 @@
+import { theme } from '../stitches.config.js';
+
+export default function PoweredByWargaming() {
+  return (
+    <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
+      <img
+        src="https://i.imgur.com/jADGWm0.png"
+        style={{ height: 16, width: 16 }}
+      />
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+        Powered by Wargaming
+      </span>
+    </div>
+  );
+}

src/components/Tanks/components/Item.tsx

@@ -0,0 +1,35 @@
+import { TANK_ICONS, TankType } from '../../../core/blitz/tankopedia.js';
+
+export interface ItemProps {
+  icon?: string;
+  type: TankType;
+  name: string;
+}
+
+export function Item({ icon, type, name }: ItemProps) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        minWidth: 128,
+        height: 128,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {icon && <img src={icon} style={{ flex: 1, objectFit: 'contain' }} />}
+
+      <div style={{ display: 'flex', margin: 'auto', gap: 4 }}>
+        <img src={TANK_ICONS[type]} style={{ width: 14, height: 14 }} />
+        <span
+          style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap' }}
+        >
+          {name}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Tanks/components/Root.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+  children: ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Tanks/index.ts

@@ -0,0 +1,2 @@
+export * from './components/Item.js';
+export * from './components/Root.js';