feat: avatars search bar ui

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",