feat: camouflage

src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx

@@ -0,0 +1,28 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaTemporary,
+} from '../../../../../../../stores/tankopedia';
+
+export function Camouflage() {
+  const camouflage = useTankopediaTemporary((state) => state.camouflage);
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">Camouflage</Heading>
+
+      <ModuleButton
+        selected={camouflage}
+        first
+        last
+        type="camouflage"
+        onClick={() => {
+          mutateTankopediaTemporary((draft) => {
+            draft.camouflage = !camouflage;
+          });
+        }}
+      />
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Configure/index.tsx

@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
 import { Equipments } from './components/Equipments';
 import { Modules } from './components/Modules';
@@ -12,6 +13,7 @@ export function Configure() {
         <Modules />
         <Equipments />
         <Consumables />
+        <Camouflage />
       </Flex>
 
       {/*
@@ -19,10 +21,6 @@ export function Configure() {
         <Heading size="5">Camouflage</Heading>
       </Flex>
 
-      <Flex gap="4" direction="column">
-        <Heading size="5">Consumables</Heading>
-      </Flex>
-
       <Flex gap="4" direction="column">
         <Heading size="5">Provisions</Heading>
       </Flex> */}