feat: shells

src/app/tools/compare/page.tsx

@@ -698,7 +698,6 @@ export default function Page() {
                               </Flex>
                             </Popover.Content>
                           </Popover.Root>
-
                           <Flex align="center" justify="center" gap="3">
                             <Popover.Root>
                               <Popover.Trigger>
@@ -968,6 +967,46 @@ export default function Page() {
                               </Popover.Content>
                             </Popover.Root>
                           </Flex>
+
+                          <Flex mt="1">
+                            {gun.shells.map((thisShell, shellIndex) => (
+                              <IconButton
+                                color={
+                                  thisShell.id === shell.id ? undefined : 'gray'
+                                }
+                                variant="soft"
+                                key={thisShell.id}
+                                style={{
+                                  borderTopLeftRadius:
+                                    shellIndex === 0 ? undefined : 0,
+                                  borderBottomLeftRadius:
+                                    shellIndex === 0 ? undefined : 0,
+                                  borderTopRightRadius:
+                                    shellIndex === gun.shells.length - 1
+                                      ? undefined
+                                      : 0,
+                                  borderBottomRightRadius:
+                                    shellIndex === gun.shells.length - 1
+                                      ? undefined
+                                      : 0,
+                                  marginLeft: shellIndex === 0 ? 0 : -1,
+                                }}
+                                onClick={() => {
+                                  mutateCompareTemporary((draft) => {
+                                    draft.members[index].shell = thisShell;
+                                  });
+                                }}
+                              >
+                                <img
+                                  width={16}
+                                  height={16}
+                                  src={asset(
+                                    `icons/shells/${thisShell.icon}.webp`,
+                                  )}
+                                />
+                              </IconButton>
+                            ))}
+                          </Flex>
                         </Flex>
                       </Table.Cell>
                     );