feat: ui

packages/i18n/strings/en.json

@@ -1109,6 +1109,10 @@
         "configuration": {
           "title": "Configuration",
 
+          "equalizer": {
+            "title": "Equalizer",
+            "equalize": "Equalize"
+          },
           "modules": {
             "title": "Modules",
             "stock": "Stock",

packages/website/src/components/Tankopedia/CharacteristicsSection/components/ConfigurationChildWrapper.tsx

@@ -1,5 +1,5 @@
-import { type FlexProps, Flex } from '@radix-ui/themes';
-import type { ReactNode } from 'react';
+import { type FlexProps, Flex } from "@radix-ui/themes";
+import type { ReactNode } from "react";
 
 type ConfigurationChildWrapperProps = FlexProps & {
   children: ReactNode;
@@ -7,13 +7,15 @@ type ConfigurationChildWrapperProps = FlexProps & {
 
 export function ConfigurationChildWrapper({
   children,
+  style,
   ...props
 }: ConfigurationChildWrapperProps) {
   return (
     <Flex
       gap="2"
       direction="column"
-      align={{ initial: 'center', sm: 'start' }}
+      align={{ initial: "center", sm: "start" }}
+      style={{ width: "100%", ...style }}
       {...props}
     >
       {children}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx

@@ -0,0 +1,43 @@
+import { asset } from "@blitzkit/core";
+import { Box, Flex, Heading, Switch, Text } from "@radix-ui/themes";
+import { useLocale } from "../../../../hooks/useLocale";
+import { ConfigurationChildWrapper } from "./ConfigurationChildWrapper";
+
+export function Equalizer() {
+  const { strings } = useLocale();
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">
+        {strings.website.tools.tankopedia.configuration.equalizer.title}
+      </Heading>
+
+      <Box
+        width="100%"
+        style={{
+          cursor: "pointer",
+          borderRadius: "var(--radius-3)",
+          backgroundImage: `url(${asset("icons/game_mode_banners/45.webp")})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          overflow: "hidden",
+        }}
+      >
+        <Flex
+          width="100%"
+          justify="between"
+          p="4"
+          style={{
+            background:
+              "linear-gradient(90deg, var(--black-a3), var(--gray-1))",
+          }}
+        >
+          <Text>
+            {strings.website.tools.tankopedia.configuration.equalizer.equalize}
+          </Text>
+          <Switch />
+        </Flex>
+      </Box>
+    </ConfigurationChildWrapper>
+  );
+}

packages/website/src/components/Tankopedia/CharacteristicsSection/index.tsx

@@ -1,14 +1,15 @@
-import { Flex } from '@radix-ui/themes';
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
-import { Characteristics } from './components/Characteristics';
-import { CompareOptions } from './components/Characteristics/components/CompareOptions';
-import { StatSearch } from './components/Characteristics/components/StatSearch';
-import { Consumables } from './components/Consumables';
-import { Equipment } from './components/Equipment';
-import { Miscellaneous } from './components/Miscellaneous';
-import { Modules } from './components/Modules';
-import { Provisions } from './components/Provisions';
-import { Skills } from './components/Skills';
+import { Flex } from "@radix-ui/themes";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
+import { Characteristics } from "./components/Characteristics";
+import { CompareOptions } from "./components/Characteristics/components/CompareOptions";
+import { StatSearch } from "./components/Characteristics/components/StatSearch";
+import { Consumables } from "./components/Consumables";
+import { Equalizer } from "./components/Equalizer";
+import { Equipment } from "./components/Equipment";
+import { Miscellaneous } from "./components/Miscellaneous";
+import { Modules } from "./components/Modules";
+import { Provisions } from "./components/Provisions";
+import { Skills } from "./components/Skills";
 
 export function CharacteristicsSection({
   skeleton,
@@ -16,34 +17,35 @@ export function CharacteristicsSection({
   return (
     <Flex direction="column" gap="3">
       <Flex
-        display={{ initial: 'none', sm: 'flex' }}
-        direction={{ initial: 'column', md: 'row' }}
+        display={{ initial: "none", sm: "flex" }}
+        direction={{ initial: "column", md: "row" }}
         align="center"
         justify="center"
         mb="8"
-        gap={{ initial: '4', md: '8' }}
+        gap={{ initial: "4", md: "8" }}
       >
         <CompareOptions />
         <StatSearch />
       </Flex>
 
-      <Flex mt="4" px="4" style={{ boxSizing: 'border-box' }} gap="6">
+      <Flex mt="4" px="4" style={{ boxSizing: "border-box" }} gap="6">
         <Flex
           flexGrow="1"
           gap="9"
           justify="center"
-          align={{ initial: 'center', sm: 'start' }}
-          direction={{ initial: 'column', sm: 'row' }}
+          align={{ initial: "center", sm: "start" }}
+          direction={{ initial: "column", sm: "row" }}
         >
           <Flex
             direction="column"
             gap="6"
             maxWidth="19rem"
-            align={{ initial: 'center', sm: 'start' }}
+            align={{ initial: "center", sm: "start" }}
           >
             <Modules />
             <Equipment />
             <Provisions />
+            <Equalizer />
             <Consumables />
             <Skills />
             <Miscellaneous />
@@ -52,11 +54,11 @@ export function CharacteristicsSection({
           <Flex
             direction="column"
             gap="6"
-            align={{ initial: 'stretch', sm: 'center' }}
-            width={{ initial: '100%', sm: 'auto' }}
+            align={{ initial: "stretch", sm: "center" }}
+            width={{ initial: "100%", sm: "auto" }}
           >
             <Flex
-              display={{ initial: 'flex', sm: 'none' }}
+              display={{ initial: "flex", sm: "none" }}
               direction="column"
               align="center"
               justify="center"