feat: avatars search bar ui

packages/i18n/strings/en.json

@@ -46,5 +46,9 @@
   "home": {
     "search": "Search tanks, players, tools...",
     "credit": "by TrèsAbhi"
+  },
+
+  "avatars": {
+    "search": "Search avatars..."
   }
 }

packages/website-ue/src/components/AvatarControls/index.tsx

@@ -0,0 +1,16 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useStrings } from "../../hooks/useStrings";
+import { TextField } from "../TextField";
+import "./index.css";
+
+export function AvatarControls() {
+  const strings = useStrings();
+
+  return (
+    <div>
+      <TextField placeholder={strings.avatars.search}>
+        <MagnifyingGlassIcon />
+      </TextField>
+    </div>
+  );
+}

packages/website-ue/src/components/Section.astro

@@ -1,22 +0,0 @@
-<style>
-  .section {
-    display: flex;
-    justify-content: center;
-    padding: 0 var(--space-4);
-
-    .content {
-      flex: 1;
-      max-width: var(--page-width);
-
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-  }
-</style>
-
-<div class="section">
-  <div class="content">
-    <slot />
-  </div>
-</div>

packages/website-ue/src/components/Section/index.css

@@ -0,0 +1,14 @@
+.section {
+  display: flex;
+  justify-content: center;
+  padding: 0 var(--space-4);
+
+  .content {
+    flex: 1;
+    max-width: var(--page-width);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+}

packages/website-ue/src/components/Section/index.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export function Section({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div className={classNames("section", className)} {...props}>
+      <div className="content">{children}</div>
+    </div>
+  );
+}

packages/website-ue/src/components/TextField/index.css

@@ -16,6 +16,10 @@
 
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
+
+    input {
+      padding-left: 0;
+    }
   }
 
   &:focus-within {
@@ -38,6 +42,7 @@
     font-size: inherit;
     font-weight: medium;
     padding: var(--space-3) 0;
+    padding-left: var(--space-4);
 
     color: var(--gray-12);
 

packages/website-ue/src/components/ToolBanner.astro

@@ -15,8 +15,9 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 ---
 
 <style>
-  .tool-hero {
+  .tool-banner {
     background-size: cover;
+    margin-bottom: calc(var(--space-5) - var(--space-4));
 
     .content {
       width: 100%;
@@ -63,7 +64,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 </style>
 
 <div
-  class="tool-hero"
+  class="tool-banner"
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
     backgroundPosition: tool.banner_background_position ?? "top",

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from "react";
 import { AvatarCard } from "../../../components/AvatarCard";
+import { AvatarControls } from "../../../components/AvatarControls";
 import { IncrementalLoader } from "../../../components/IncrementalLoader";
+import { Section } from "../../../components/Section";
 import { api } from "../../../core/api/dynamic";
 import { useAwait } from "../../../hooks/useAwait";
 import { useGameStrings } from "../../../hooks/useGameStrings";
@@ -75,13 +77,21 @@ function Content({}: ContentProps) {
   }, []);
 
   return (
-    <div className="avatars">
+    <>
-      <IncrementalLoader
+      <Section>
-        initial={40}
+        <AvatarControls />
-        intermediate={10}
+      </Section>
-        data={ordered}
+
-        Component={AvatarCard}
+      <Section>
-      />
+        <div className="avatars">
-    </div>
+          <IncrementalLoader
+            initial={40}
+            intermediate={10}
+            data={ordered}
+            Component={AvatarCard}
+          />
+        </div>
+      </Section>
+    </>
   );
 }

packages/website-ue/src/pages/[...locale]/avatars/index.astro

@@ -1,5 +1,4 @@
 ---
-import Section from "../../../components/Section.astro";
 import ToolBanner from "../../../components/ToolBanner.astro";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
@@ -21,9 +20,7 @@ const { locale } = Astro.props;
 <BaseLayout {locale} accent="gold">
   <ToolBanner {locale} tool={tools.avatars} slot="pre-app" />
 
-  <Section>
+  <Page {locale} client:only="react">
-    <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
-      <Page {locale} skeleton slot="fallback" />
+  </Page>
-    </Page>
-  </Section>
 </BaseLayout>

packages/website-ue/src/pages/[...locale]/index.astro

@@ -4,7 +4,7 @@ import "@radix-ui/colors/amber-dark.css";
 import type { GetStaticPaths } from "astro";
 import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
-import Section from "../../components/Section.astro";
+import Section from "../../components/Section";
 import ToolCard from "../../components/ToolCard.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";