feat: search

packages/website/src/components/Gallery/List.tsx

@@ -0,0 +1,48 @@
+import { Flex, Text } from '@radix-ui/themes';
+import fuzzysort from 'fuzzysort';
+import { useMemo } from 'react';
+import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+
+interface GalleryListProps {
+  avatars: Avatar[];
+}
+
+export interface Avatar {
+  name: string;
+  id: string;
+}
+
+export function GalleryList({ avatars }: GalleryListProps) {
+  const search = GalleryEphemeral.use((state) => state.search);
+  const filtered = useMemo(() => {
+    if (search === undefined) {
+      return avatars;
+    } else {
+      return fuzzysort
+        .go(search, avatars, { key: 'name' })
+        .map((result) => result.obj);
+    }
+  }, [search]);
+
+  return (
+    <Flex wrap="wrap" gap="4">
+      {filtered.map((avatar) => {
+        return (
+          <Flex key={avatar.id} direction="column" align="center" width="6rem">
+            <img
+              style={{
+                width: '4rem',
+                aspectRatio: '7 / 8',
+                objectFit: 'cover',
+              }}
+              src={`/api/gallery/${avatar.id}.webp`}
+            />
+            <Text align="center" style={{ maxWidth: '100%' }}>
+              {avatar.name}
+            </Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/components/Gallery/Search.tsx

@@ -0,0 +1,26 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { TextField } from '@radix-ui/themes';
+import { useRef } from 'react';
+import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+
+export function GallerySearch() {
+  const input = useRef<HTMLInputElement>(null);
+  const mutateGalleryEphemeral = GalleryEphemeral.useMutation();
+
+  return (
+    <TextField.Root
+      placeholder="Search avatars..."
+      ref={input}
+      onChange={(event) => {
+        mutateGalleryEphemeral((draft) => {
+          const trimmed = event.target.value.trim();
+          draft.search = trimmed.length === 0 ? undefined : trimmed;
+        });
+      }}
+    >
+      <TextField.Slot>
+        <MagnifyingGlassIcon />
+      </TextField.Slot>
+    </TextField.Root>
+  );
+}