feat: animations on hove

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

@@ -0,0 +1,30 @@
+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 128px -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

@@ -0,0 +1,107 @@
+'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 { 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}`}>
+                  <Card className={styles.listing}>
+                    <Inset
+                      key={index}
+                      style={{
+                        height: 128,
+                        width: 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}`,
+                        }}
+                      />
+
+                      <Text
+                        className={styles.listingLabel}
+                        size="4"
+                        color={
+                          tank.tree_type === 'collector'
+                            ? 'cyan'
+                            : tank.tree_type === 'premium'
+                            ? 'amber'
+                            : undefined
+                        }
+                        weight="medium"
+                        style={{
+                          color:
+                            tank.tree_type === 'tech-tree'
+                              ? slateDark.slate11
+                              : undefined,
+                          position: 'absolute',
+                          bottom: 8,
+                          left: 12,
+                        }}
+                      >
+                        {tank.name_short ??
+                          tank.name ??
+                          `Unknown tank ${tank.id}`}
+                      </Text>
+                    </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>
+      )}
+    </>
+  );
+}