feat: page turner

src/app/tools/tankopedia/components/List/index.css.tsx

@@ -1,30 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { theme } from '../../../../../stitches.config';
-
-export const listing = style({});
-
-export const listingShadow = style({
-  boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
-
-  [`.${listing}:hover &`]: {
-    boxShadow: `inset 0 0 0 -128px ${theme.colors.appBackground1}`,
-  },
-});
-
-export const listingLabel = style({
-  transition: `transform ${theme.durations.regular}`,
-  transform: 'translateY(0)',
-
-  [`.${listing}:hover &`]: {
-    transform: 'translateY(200%)',
-  },
-});
-
-export const listingImage = style({
-  transition: `transform ${theme.durations.regular}`,
-  transform: 'translateX(25%) translateY(0)',
-
-  [`.${listing}:hover &`]: {
-    transform: 'translateX(25%) translateY(10%)',
-  },
-});

src/app/tools/tankopedia/components/List/index.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import { slateDark } from '@radix-ui/colors';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Card, Flex, Inset, Text, TextField } from '@radix-ui/themes';
-import { use, useRef } from 'react';
-import { Search } from 'react-fuzzysort';
-import { tankIcon } from '../../../../../core/blitzkrieg/tankIcon';
-import {
-  TANK_ICONS,
-  TANK_ICONS_COLLECTOR,
-  TANK_ICONS_PREMIUM,
-  tanks,
-} from '../../../../../core/blitzkrieg/tankopedia';
-import { theme } from '../../../../../stitches.config';
-import * as styles from './index.css';
-
-export function List() {
-  const awaitedTanks = use(
-    tanks.then((tanks) => tanks.sort((a, b) => b.tier - a.tier)),
-  );
-  const input = useRef<HTMLInputElement>(null);
-
-  return (
-    <>
-      <TextField.Root>
-        <TextField.Slot>
-          <MagnifyingGlassIcon height="16" width="16" />
-        </TextField.Slot>
-        <TextField.Input ref={input} placeholder="Search tanks..." />
-      </TextField.Root>
-
-      {awaitedTanks.length > 0 && (
-        <Flex wrap="wrap" gap="3" justify="center">
-          <Search
-            keyOptions={{}}
-            input={input}
-            list={awaitedTanks.map((tank, index) => ({
-              node: (
-                <a
-                  href={`/tools/tankopedia/${tank.id}`}
-                  style={{
-                    flex: 1,
-                  }}
-                >
-                  <Card className={styles.listing}>
-                    <Inset
-                      key={index}
-                      style={{
-                        minHeight: 128,
-                        minWidth: 256,
-                        position: 'relative',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <img
-                        className={styles.listingImage}
-                        src={tankIcon(tank.id)}
-                        style={{
-                          objectFit: 'contain',
-                          objectPosition: 'left center',
-                        }}
-                      />
-
-                      <div
-                        className={styles.listingShadow}
-                        style={{
-                          width: '100%',
-                          height: '100%',
-                          position: 'absolute',
-                          transition: `box-shadow ${theme.durations.regular}`,
-                        }}
-                      />
-
-                      <Flex
-                        align="center"
-                        justify="center"
-                        gap="1"
-                        className={styles.listingLabel}
-                        style={{
-                          position: 'absolute',
-                          bottom: 8,
-                          left: 12,
-                        }}
-                      >
-                        <img
-                          src={
-                            (tank.tree_type === 'collector'
-                              ? TANK_ICONS_COLLECTOR
-                              : tank.tree_type === 'premium'
-                                ? TANK_ICONS_PREMIUM
-                                : TANK_ICONS)[tank.type]
-                          }
-                          style={{ width: '1em', height: '1em' }}
-                        />
-                        <Text
-                          size="4"
-                          color={
-                            tank.tree_type === 'collector'
-                              ? 'blue'
-                              : tank.tree_type === 'premium'
-                                ? 'amber'
-                                : undefined
-                          }
-                          weight="medium"
-                          style={{
-                            color:
-                              tank.tree_type === 'tech-tree'
-                                ? slateDark.slate12
-                                : undefined,
-                          }}
-                        >
-                          {tank.name_short ??
-                            tank.name ??
-                            `Unknown tank ${tank.id}`}
-                        </Text>
-                      </Flex>
-                    </Inset>
-                  </Card>
-                </a>
-              ),
-              query: `${
-                tank.name_short ?? tank.name ?? `Unknown tank ${tank.id}`
-              } ${tank.tree_type} ${
-                tank.type === 'AT-SPG' ? 'tank destroyer' : tank.type
-              } ${tank.id}`,
-            }))}
-          />
-        </Flex>
-      )}
-    </>
-  );
-}

src/app/tools/tankopedia/components/Options.tsx

@@ -0,0 +1,60 @@
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
+import {
+  TankopediaSortBy,
+  TankopediaSortDirection,
+  useTankopedia,
+} from '../../../../stores/tankopedia';
+
+export function Options() {
+  const tankopediaState = useTankopedia();
+
+  return (
+    <Flex gap="2">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="soft">
+            Sort by
+            <CaretDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup
+            value={tankopediaState.sortBy}
+            onValueChange={(value) =>
+              useTankopedia.setState({ sortBy: value as TankopediaSortBy })
+            }
+          >
+            <DropdownMenu.RadioItem value="tier">Tier</DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="soft">
+            Sort order
+            <CaretDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup
+            value={tankopediaState.sortDirection}
+            onValueChange={(value) =>
+              useTankopedia.setState({
+                sortDirection: value as TankopediaSortDirection,
+              })
+            }
+          >
+            <DropdownMenu.RadioItem value="ascending">
+              Ascending
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="descending">
+              Descending
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Flex>
+  );
+}