From 9b97d3e27d34407882011516803547c8be4fbae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 2 Oct 2025 10:29:43 -0500
Subject: [PATCH] feat: guesser flag icons

---
 packages/website/src/components/Guesser.tsx   |  8 +++++++
 .../website/src/components/SearchResults.tsx  | 21 ++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/website/src/components/Guesser.tsx b/packages/website/src/components/Guesser.tsx
index 5d78c0e43..25b93694f 100644
--- a/packages/website/src/components/Guesser.tsx
+++ b/packages/website/src/components/Guesser.tsx
@@ -1,4 +1,5 @@
 import {
+  asset,
   SEARCH_KEYS,
   TankDefinition,
   TIER_ROMAN_NUMERALS,
@@ -110,6 +111,7 @@ export function Guesser() {
 
                 return (
                   <SearchResults.Item
+                    key={result.id}
                     onClick={() => {
                       if (!input.current) return;
 
@@ -118,6 +120,12 @@ export function Guesser() {
                       setResults(null);
                     }}
                     text={unwrap(result.name)}
+                    prefix={
+                      <img
+                        style={{ width: "1em", height: "1em" }}
+                        src={asset(`flags/circle/${result.nation}.webp`)}
+                      />
+                    }
                     discriminator={
                       <Flex
                         align="center"
diff --git a/packages/website/src/components/SearchResults.tsx b/packages/website/src/components/SearchResults.tsx
index 821394068..f0c41662c 100644
--- a/packages/website/src/components/SearchResults.tsx
+++ b/packages/website/src/components/SearchResults.tsx
@@ -2,29 +2,30 @@ import {
   Badge,
   Button,
   Flex,
+  Text,
   type ButtonProps,
   type FlexProps,
-} from '@radix-ui/themes';
-import type { ReactNode } from 'react';
+} from "@radix-ui/themes";
+import type { ReactNode } from "react";
 
 function Root(props: FlexProps) {
   return <Flex direction="column" gap="2" width="100%" {...props} />;
 }
 
-interface ItemProps extends ButtonProps {
+interface ItemProps extends Omit<ButtonProps, "prefix"> {
+  prefix?: React.ReactNode;
   text: string;
   discriminator?: ReactNode;
 }
 
-function Item({ text, discriminator, ...props }: ItemProps) {
+function Item({ text, discriminator, prefix, ...props }: ItemProps) {
   return (
     <Button variant="ghost" {...props} highContrast>
-      <Flex
-        justify={discriminator === undefined ? 'center' : 'between'}
-        width="100%"
-        gap="2"
-      >
-        {text}
+      <Flex width="100%" gap="2" align="center">
+        {prefix}
+        <Text style={{ flex: 1 }} align={prefix ? "left" : "center"}>
+          {text}
+        </Text>
         {discriminator !== undefined && <Badge>{discriminator}</Badge>}
       </Flex>
     </Button>