feat: move to css chunk 1

packages/website/src/components/EquipmentManager/index.css

@@ -0,0 +1,9 @@
+.equipment-manager .left {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.equipment-manager .right {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/website/src/components/EquipmentManager/index.tsx

@@ -0,0 +1,63 @@
+import type { EquipmentPreset } from '@blitzkit/core';
+import { Flex } from '@radix-ui/themes';
+import { chunk, cloneDeep } from 'lodash-es';
+import type { EquipmentMatrix } from '../../stores/duel';
+import { EquipmentButton } from '../ModuleButtons/EquipmentButton';
+import './index.css';
+
+interface EquipmentManagerProps {
+  preset: EquipmentPreset;
+  matrix: EquipmentMatrix;
+  onChange: (matrix: EquipmentMatrix) => void;
+}
+
+export function EquipmentManager({
+  preset,
+  matrix,
+  onChange,
+}: EquipmentManagerProps) {
+  return (
+    <Flex direction="column" gap="2" className="equipment-manager">
+      {chunk(preset.slots, 3).map((equipmentRow, rowIndex) => (
+        <Flex gap="2" key={rowIndex}>
+          {equipmentRow.map((equipment, columnIndex) => (
+            <Flex key={columnIndex}>
+              <EquipmentButton
+                className="left"
+                equipment={equipment.left}
+                selected={matrix[rowIndex][columnIndex] === -1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === -1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = -1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+              <EquipmentButton
+                className="right"
+                equipment={equipment.right}
+                selected={matrix[rowIndex][columnIndex] === 1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === 1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = 1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}