feat: compare button

src/app/tools/tankopedia/[id]/components/Title.tsx

@@ -1,5 +1,6 @@
-import { UpdateIcon } from '@radix-ui/react-icons';
+import { CaretRightIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Dialog, Flex, Heading } from '@radix-ui/themes';
+import Link from 'next/link';
 import { useState } from 'react';
 import { TREE_TYPE_ICONS } from '../../../../../components/Tanks/components/Item/constants';
 import { assignDuelMember } from '../../../../../core/blitzkrieg/assignDuelMember';
@@ -9,11 +10,22 @@ import { TankSearch } from '../../components/TankSearch';
 
 export function Title() {
   const protagonist = useDuel((state) => state.protagonist!);
+  const antagonist = useDuel((state) => state.antagonist!);
+  const compareTanks =
+    protagonist.tank.id === antagonist.tank.id
+      ? [protagonist.tank.id]
+      : [protagonist.tank.id, antagonist.tank.id];
   const [changeTankDialogOpen, setChangeTankDialogOpen] = useState(false);
 
   return (
     <>
-      <Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
+      <Flex
+        gap="6"
+        justify="center"
+        align="center"
+        style={{ padding: 16 }}
+        wrap="wrap"
+      >
         <Flex gap="2" align="center">
           <Heading
             color={
@@ -41,36 +53,44 @@ export function Title() {
           </Heading>
         </Flex>
 
-        <Dialog.Root
-          open={changeTankDialogOpen}
-          onOpenChange={setChangeTankDialogOpen}
-        >
-          <Dialog.Trigger>
-            <Button variant="ghost">
-              Change <UpdateIcon />
-            </Button>
-          </Dialog.Trigger>
+        <Flex gap="6">
+          <Dialog.Root
+            open={changeTankDialogOpen}
+            onOpenChange={setChangeTankDialogOpen}
+          >
+            <Dialog.Trigger>
+              <Button variant="ghost">
+                Change <UpdateIcon />
+              </Button>
+            </Dialog.Trigger>
 
-          <Dialog.Content>
-            <Flex gap="4" direction="column">
-              <Flex
-                direction="column"
-                gap="4"
-                style={{ flex: 1 }}
-                justify="center"
-              >
-                <TankSearch
-                  compact
-                  onSelect={(tank) => {
-                    assignDuelMember('protagonist', tank.id);
-                    setChangeTankDialogOpen(false);
-                    pushTankopediaPath(tank.id);
-                  }}
-                />
+            <Dialog.Content>
+              <Flex gap="4" direction="column">
+                <Flex
+                  direction="column"
+                  gap="4"
+                  style={{ flex: 1 }}
+                  justify="center"
+                >
+                  <TankSearch
+                    compact
+                    onSelect={(tank) => {
+                      assignDuelMember('protagonist', tank.id);
+                      setChangeTankDialogOpen(false);
+                      pushTankopediaPath(tank.id);
+                    }}
+                  />
+                </Flex>
               </Flex>
-            </Flex>
-          </Dialog.Content>
-        </Dialog.Root>
+            </Dialog.Content>
+          </Dialog.Root>
+
+          <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
+            <Button variant="ghost">
+              Compare <CaretRightIcon />
+            </Button>
+          </Link>
+        </Flex>
       </Flex>
     </>
   );