feat: cleaner home page

src/app/page.tsx

@@ -1,94 +1,79 @@
 'use client';
 
-import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Flex, Text, TextField } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
 import Link from 'next/link';
-import { useRef } from 'react';
-import { Search, SearchItem } from 'react-fuzzysort';
 import PageWrapper from '../components/PageWrapper';
 import { TOOLS } from '../constants/tools';
 import { theme } from '../stitches.config';
 import * as styles from './page.css';
 
 export default function Page() {
-  const input = useRef<HTMLInputElement>(null);
-
   return (
     <PageWrapper>
-      <TextField.Root placeholder="Search tools...">
+      <Flex direction="column" gap="4" justify="center" style={{ flex: 1 }}>
-        <TextField.Slot>
+        {/* <TextField.Root placeholder="Search anything...">
-          <MagnifyingGlassIcon height="16" width="16" />
+          <TextField.Slot>
-        </TextField.Slot>
+            <MagnifyingGlassIcon height="16" width="16" />
-      </TextField.Root>
+          </TextField.Slot>
+        </TextField.Root> */}
 
-      <Flex gap="3" wrap="wrap" align="center" justify="center">
+        <Flex gap="3" wrap="wrap" align="center" justify="center">
-        <Search
+          {TOOLS.map((tool) => (
-          input={input}
+            <Link
-          list={TOOLS.map(
+              href={tool.href ?? `/tools/${tool.id}`}
-            (tool) =>
+              target={tool.href ? '_blank' : undefined}
-              ({
+              className={
-                node: (
+                tool.disabled ? styles.tool.disabled : styles.tool.enabled
-                  <Link
+              }
-                    href={tool.href ?? `/tools/${tool.id}`}
+              style={{
-                    target={tool.href ? '_blank' : undefined}
+                backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
-                    className={
+                cursor: tool.disabled ? 'default' : 'pointer',
-                      tool.disabled ? styles.tool.disabled : styles.tool.enabled
+                opacity: tool.disabled ? 0.25 : 1,
-                    }
+                height: 128,
-                    style={{
+                minWidth: 256,
-                      backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
+                flex: 1,
-                      cursor: tool.disabled ? 'default' : 'pointer',
+                borderRadius: 8,
-                      opacity: tool.disabled ? 0.25 : 1,
+                textDecoration: 'none',
-                      height: 128,
+                backgroundSize: 'cover',
-                      minWidth: 256,
+                backgroundPosition: 'center',
-                      flex: 1,
+                overflow: 'hidden',
-                      borderRadius: 8,
+                display: 'flex',
-                      textDecoration: 'none',
+                flexDirection: 'column',
-                      backgroundSize: 'cover',
+                alignItems: 'flex-start',
-                      backgroundPosition: 'center',
+                justifyContent: 'flex-end',
-                      overflow: 'hidden',
+                padding: 16,
-                      display: 'flex',
+                gap: 4,
-                      flexDirection: 'column',
+                transition: `box-shadow ${theme.durations.regular}`,
-                      alignItems: 'flex-start',
+              }}
-                      justifyContent: 'flex-end',
+              onClick={(event) => {
-                      padding: 16,
+                if (tool.disabled) event.preventDefault();
-                      gap: 4,
+              }}
-                      transition: `box-shadow ${theme.durations.regular}`,
+            >
-                    }}
+              <span
-                    onClick={(event) => {
+                style={{
-                      if (tool.disabled) event.preventDefault();
+                  fontSize: 32,
-                    }}
+                  color: theme.colors.textHighContrast,
-                  >
+                  display: 'flex',
-                    <span
+                  alignItems: 'center',
-                      style={{
+                  justifyContent: 'center',
-                        fontSize: 32,
+                }}
-                        color: theme.colors.textHighContrast,
+              >
-                        display: 'flex',
+                {tool.title}
-                        alignItems: 'center',
+                <CaretRightIcon style={{ width: '1em', height: '1em' }} />
-                        justifyContent: 'center',
+              </span>
-                      }}
+              <span
-                    >
+                style={{
-                      {tool.title}
+                  color: theme.colors.textLowContrast,
-                      <CaretRightIcon style={{ width: '1em', height: '1em' }} />
+                  fontSize: 16,
-                    </span>
+                }}
-                    <span
+              >
-                      style={{
+                {tool.disabled ? 'Coming soon!' : tool.description}
-                        color: theme.colors.textLowContrast,
+              </span>
-                        fontSize: 16,
+            </Link>
-                      }}
+          ))}
-                    >
+        </Flex>
-                      {tool.disabled ? 'Coming soon!' : tool.description}
-                    </span>
-                  </Link>
-                ),
-                query: `${tool.title} ${tool.description}`,
-              }) satisfies SearchItem,
-          )}
-        />
       </Flex>
-
-      <Text size="1" color="gray" align="center">
-        Images courtesy of Wargaming Art Department
-      </Text>
     </PageWrapper>
   );
 }