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>
+      )}
+    </>
+  );
+}

src/app/tools/tankopedia/page.tsx

@@ -1,131 +1,14 @@
-'use client';
-
-import { blackA, slateDark } from '@radix-ui/colors';
-import { Card, Inset, Text } from '@radix-ui/themes';
-import { useEffect, useState } from 'react';
+import { Text } from '@radix-ui/themes';
+import { Suspense } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
-import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
-import {
-  BlitzkriegTankopediaEntry,
-  tanks,
-} from '../../../core/blitzkrieg/tankopedia';
-
-const sortedTanks = tanks.then((tanks) =>
-  tanks.sort((a, b) => b.tier - a.tier),
-);
+import { List } from './components/List';
 
 export default function Page() {
-  const [tanks, setTanks] = useState<BlitzkriegTankopediaEntry[]>([]);
-
-  useEffect(() => {
-    (async () => setTanks(await sortedTanks))();
-  }, []);
-
   return (
-    <PageWrapper
-      style={{
-        flexWrap: 'wrap',
-        flexDirection: 'row',
-      }}
-    >
-      {tanks.map((tank) => (
-        <Card
-          key={tank.id}
-          style={{
-            height: 128,
-            width: 256,
-          }}
-        >
-          <Inset>
-            <a
-              href={`/tools/tankopedia/${tank.id}`}
-              style={{
-                // backgroundColor: 'rgba(255, 0, 0, 0.25)',
-                backgroundImage: 'url(https://i.imgur.com/biJPgpm.png)',
-                backgroundSize: '151%',
-                width: '100%',
-                height: '100%',
-                position: 'relative',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <img
-                src={tankIcon(tank.id)}
-                style={{
-                  objectFit: 'contain',
-                  objectPosition: 'left center',
-                }}
-                onLoad={(event) => {
-                  // get image width
-                  const target = event.target as HTMLImageElement;
-                  const { naturalWidth } = target;
-
-                  if (naturalWidth === 256) {
-                    target.style.transform = 'translateX(25%)';
-                  }
-                }}
-              />
-
-              <div
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  position: 'absolute',
-                  // gradiant with darkest at the bottom
-                  background: `linear-gradient(#00000000, ${blackA.blackA5})`,
-                }}
-              />
-
-              <Text
-                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>
-            </a>
-          </Inset>
-        </Card>
-      ))}
+    <PageWrapper size="wide">
+      <Suspense fallback={<Text>Loading...</Text>}>
+        <List />
+      </Suspense>
     </PageWrapper>
   );
 }
-
-{
-  /* <Flex direction="column" justify="center" align="end" gap="2">
-<Flex justify="end" align="center" gap="1">
-  {tank.tree_type !== 'tech-tree' && (
-    <Badge
-      color={tank.tree_type === 'collector' ? 'blue' : 'amber'}
-    >
-      {tank.tree_type === 'collector' ? 'Collector' : 'Premium'}
-    </Badge>
-  )}
-  <Badge color="indigo">
-    {(() => {
-      if (tank.type === 'AT-SPG') return 'Tank Destroyer';
-      if (tank.type === 'lightTank') return 'Light Tank';
-      if (tank.type === 'mediumTank') return 'Medium Tank';
-      if (tank.type === 'heavyTank') return 'Heavy Tank';
-    })()}
-  </Badge>
-</Flex>
-</Flex> */
-}

src/components/PageWrapper.tsx

@@ -3,28 +3,30 @@ import { ComponentProps } from 'react';
 
 interface PageWrapperProps extends ComponentProps<typeof Flex> {
   color?: ComponentProps<typeof Theme>['accentColor'];
+  size?: 'regular' | 'wide';
 }
 
 export default function PageWrapper({
   style,
   color,
+  size = 'regular',
   ...props
 }: PageWrapperProps) {
   return (
     <Theme accentColor={color}>
       <Flex
-        {...props}
         direction="column"
         gap="4"
         style={{
           width: '100%',
-          maxWidth: 800,
+          maxWidth: size === 'regular' ? 800 : 880,
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',
 
           ...style,
         }}
+        {...props}
       />
     </Theme>
   );