From 1195f078c7b7defaec3e1bbedb51761a72f47610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:28:09 -0500
Subject: [PATCH] feat: banner

---
 src/app/components/Hero.tsx | 311 +-----------------------------------
 src/app/page.tsx            |   3 +
 2 files changed, 9 insertions(+), 305 deletions(-)

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index 328781568..b9cd45d11 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -1,82 +1,17 @@
-'use client';
-
-import {
-  CaretRightIcon,
-  Cross2Icon,
-  MagnifyingGlassIcon,
-} from '@radix-ui/react-icons';
-import {
-  Button,
-  Card,
-  Flex,
-  Heading,
-  IconButton,
-  Link,
-  Spinner,
-  Text,
-  TextField,
-} from '@radix-ui/themes';
-import { go } from 'fuzzysort';
-import { debounce } from 'lodash';
-import { useRef, useState } from 'react';
-import { isMobile } from 'react-device-detect';
-import { NAVBAR_HEIGHT } from '../../components/Navbar';
-import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../constants/regions';
-import searchPlayersAcrossRegions, {
-  AccountListWithServer,
-} from '../../core/blitz/searchPlayersAcrossRegions';
-import {
-  TankDefinition,
-  tankDefinitions,
-  tankNames,
-} from '../../core/blitzkit/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../core/blitzkit/tankDefinitions/constants';
-import { useWideFormat } from '../../hooks/useWideFormat';
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { imgur } from '../../core/blitzkit/imgur';
 import { theme } from '../../stitches.config';
 
-const DISCRIMINATOR_WIDTH = 32;
-
-// https://i.imgur.com/rUPie9G.jpeg
-
 export function Hero() {
-  const wideFormat = useWideFormat(512);
-  const [showSearch, setShowSearch] = useState(false);
-  const [searching, setSearching] = useState(false);
-  const [searchResults, setSearchResults] = useState<null | {
-    tanks: TankDefinition[];
-    players: AccountListWithServer;
-  }>();
-  const search = useRef<HTMLInputElement>(null);
-
-  const performSearch = debounce(async () => {
-    if (!search.current) return;
-
-    const sanitized = search.current.value.trim();
-    const awaitedTankDefinitions = await tankDefinitions;
-    const awaitedTankNames = await tankNames;
-    const tanks = go(sanitized, awaitedTankNames, {
-      keys: ['combined'],
-      limit: 6,
-    });
-    const players = await searchPlayersAcrossRegions(sanitized, 6);
-
-    setSearchResults({
-      tanks: tanks.map((tank) => awaitedTankDefinitions[tank.obj.id]),
-      players,
-    });
-    setSearching(false);
-  }, 500);
-
   return (
     <Flex
       align="center"
       justify="center"
       style={{
-        height: `calc(75vh - ${NAVBAR_HEIGHT}px)`,
-        minHeight: 320,
         position: 'relative',
       }}
-      p="4"
+      px="4"
+      py="9"
     >
       <div
         style={{
@@ -85,7 +20,7 @@ export function Hero() {
           left: 0,
           width: '100%',
           height: '100%',
-          background: 'url(/assets/banners/home.webp)',
+          background: `url(${imgur('rUPie9G', { format: 'jpeg' })})`,
           backgroundSize: 'cover',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'center',
@@ -113,244 +48,10 @@ export function Hero() {
           <Heading size="9" weight="bold" align="center">
             BlitzKit
           </Heading>
-          <Text color="gray" align="center">
+          <Text color="gray" align="center" size="4">
             Everything World of Tanks Blitz
           </Text>
         </Flex>
-
-        <div
-          style={{
-            maxWidth: '100%',
-            position: 'relative',
-            width: showSearch ? 640 : 320,
-            transition: 'width 0.2s ease',
-          }}
-        >
-          <TextField.Root
-            size="3"
-            placeholder="Search players or tanks..."
-            style={{
-              width: '100%',
-            }}
-            ref={search}
-            onChange={() => {
-              if (!search.current) return;
-
-              const sanitized = search.current.value.trim();
-
-              if (sanitized.length > 0) {
-                setShowSearch(true);
-                setSearching(true);
-                performSearch();
-              } else {
-                setShowSearch(false);
-              }
-            }}
-            onFocus={() => {
-              if (!search.current || !isMobile) return;
-
-              const sanitized = search.current.value.trim();
-              setShowSearch(sanitized.length > 0);
-
-              window.scrollTo({
-                top:
-                  search.current.getBoundingClientRect().top -
-                  NAVBAR_HEIGHT -
-                  32,
-                behavior: 'smooth',
-              });
-            }}
-          >
-            <TextField.Slot>
-              <MagnifyingGlassIcon />
-            </TextField.Slot>
-
-            {showSearch && (
-              <TextField.Slot>
-                <IconButton
-                  variant="ghost"
-                  color="gray"
-                  onClick={() => {
-                    if (!search.current) return;
-
-                    search.current.value = '';
-                    setShowSearch(false);
-                  }}
-                >
-                  <Cross2Icon />
-                </IconButton>
-              </TextField.Slot>
-            )}
-          </TextField.Root>
-
-          {showSearch && (
-            <Card
-              mt="3"
-              style={{
-                position: 'absolute',
-                top: '100%',
-                left: '50%',
-                transform: 'translateX(-50%)',
-                width: '100%',
-              }}
-            >
-              {searching && (
-                <Flex justify="center">
-                  <Spinner />
-                </Flex>
-              )}
-
-              {!searching && searchResults && (
-                <>
-                  <Flex
-                    gap={wideFormat ? '6' : '2'}
-                    justify="center"
-                    direction={wideFormat ? 'row' : 'column'}
-                  >
-                    <Flex
-                      direction="column"
-                      gap="2"
-                      style={{
-                        flex: 1,
-                        maxWidth: wideFormat ? '50%' : undefined,
-                      }}
-                    >
-                      <Link
-                        underline="hover"
-                        href="/tools/tankopedia"
-                        color="gray"
-                        style={{
-                          width: '100%',
-                        }}
-                      >
-                        <Flex
-                          align="center"
-                          style={{
-                            width: '100%',
-                          }}
-                        >
-                          Tankopedia
-                          <CaretRightIcon />
-                        </Flex>
-                      </Link>
-
-                      <Flex direction="column" px="2">
-                        {searchResults.tanks.map((tank) => (
-                          <Text>
-                            <Link
-                              underline="none"
-                              style={{ color: 'inherit' }}
-                              href={`/tools/tankopedia/${tank.id}`}
-                            >
-                              <Button
-                                tabIndex={-1}
-                                size="2"
-                                variant="ghost"
-                                color="gray"
-                                style={{
-                                  justifyContent: 'flex-start',
-                                  width: '100%',
-                                  color: 'inherit',
-                                  whiteSpace: 'nowrap',
-                                  overflow: 'hidden',
-                                  textOverflow: 'ellipsis',
-                                }}
-                              >
-                                <Flex align="center" gap="2">
-                                  <Text
-                                    color="gray"
-                                    size="1"
-                                    style={{
-                                      width: DISCRIMINATOR_WIDTH,
-                                      textAlign: 'left',
-                                    }}
-                                  >
-                                    {TIER_ROMAN_NUMERALS[tank.tier]}
-                                  </Text>
-
-                                  {tank.name}
-                                </Flex>
-                              </Button>
-                            </Link>
-                          </Text>
-                        ))}
-
-                        {searchResults.tanks.length === 0 && (
-                          <Text color="gray" size="2">
-                            No tanks found
-                          </Text>
-                        )}
-                      </Flex>
-                    </Flex>
-
-                    <Flex
-                      direction="column"
-                      gap="2"
-                      style={{
-                        flex: 1,
-                        maxWidth: wideFormat ? '50%' : undefined,
-                      }}
-                    >
-                      <Text color="gray">Players</Text>
-
-                      <Flex direction="column">
-                        {searchResults.players.map((player) => (
-                          <Text>
-                            <Link
-                              underline="none"
-                              style={{ color: 'inherit' }}
-                              href={`/tools/session/?id=${player.account_id}`}
-                            >
-                              <Button
-                                tabIndex={-1}
-                                size="2"
-                                variant="ghost"
-                                color="gray"
-                                style={{
-                                  justifyContent: 'flex-start',
-                                  width: '100%',
-                                  color: 'inherit',
-                                  whiteSpace: 'nowrap',
-                                  overflow: 'hidden',
-                                  textOverflow: 'ellipsis',
-                                }}
-                              >
-                                <Flex align="center" gap="2">
-                                  <Text
-                                    color="gray"
-                                    size="1"
-                                    style={{
-                                      width: DISCRIMINATOR_WIDTH,
-                                      textAlign: 'left',
-                                    }}
-                                  >
-                                    {
-                                      UNLOCALIZED_REGION_NAMES_SHORT[
-                                        player.region
-                                      ]
-                                    }
-                                  </Text>
-
-                                  {player.nickname}
-                                </Flex>
-                              </Button>
-                            </Link>
-                          </Text>
-                        ))}
-
-                        {searchResults.players.length === 0 && (
-                          <Text color="gray" size="2">
-                            No players found
-                          </Text>
-                        )}
-                      </Flex>
-                    </Flex>
-                  </Flex>
-                </>
-              )}
-            </Card>
-          )}
-        </div>
       </Flex>
     </Flex>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b4ca07548..9c047e61f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,10 +4,13 @@ import Link from 'next/link';
 import PageWrapper from '../components/PageWrapper';
 import { TOOLS } from '../constants/tools';
 import { imgur } from '../core/blitzkit/imgur';
+import { Hero } from './components/Hero';
 
 export default function Page() {
   return (
     <>
+      <Hero />
+
       <PageWrapper size={1028}>
         <Grid
           p="4"