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,6 +53,7 @@ export function Title() {
           </Heading>
         </Flex>
 
+        <Flex gap="6">
           <Dialog.Root
             open={changeTankDialogOpen}
             onOpenChange={setChangeTankDialogOpen}
@@ -71,6 +84,13 @@ export function Title() {
               </Flex>
             </Dialog.Content>
           </Dialog.Root>
+
+          <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
+            <Button variant="ghost">
+              Compare <CaretRightIcon />
+            </Button>
+          </Link>
+        </Flex>
       </Flex>
     </>
   );