feat: translate gallery

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

@@ -2,6 +2,7 @@ import { Flex, Text } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
 import { useMemo, useState } from 'react';
+import { literals } from '../../core/i18n/literals';
 import { useLocale } from '../../hooks/useLocale';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
 import { GalleryCard } from './Card';
@@ -21,7 +22,7 @@ const PREVIEW_COUNT = 28;
 export function GalleryList({ avatars }: GalleryListProps) {
   const search = GalleryEphemeral.use((state) => state.search);
   const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED);
-  const { locale } = useLocale();
+  const { locale, strings } = useLocale();
   const filtered = useMemo(() => {
     setLoadedCards(DEFAULT_LOADED);
 
@@ -37,7 +38,9 @@ export function GalleryList({ avatars }: GalleryListProps) {
   return (
     <>
       <Text align="center" color="gray">
-        {filtered.length.toLocaleString(locale)} avatars
+        {literals(strings.website.tools.gallery.search.results, [
+          filtered.length.toLocaleString(locale),
+        ])}
       </Text>
 
       <Flex wrap="wrap" gap="4" justify="center">

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

@@ -1,15 +1,17 @@
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { TextField } from '@radix-ui/themes';
 import { useRef } from 'react';
+import { useLocale } from '../../hooks/useLocale';
 import { GalleryEphemeral } from '../../stores/galleryEphemeral';
 
 export function GallerySearch() {
   const input = useRef<HTMLInputElement>(null);
   const mutateGalleryEphemeral = GalleryEphemeral.useMutation();
+  const { strings } = useLocale();
 
   return (
     <TextField.Root
-      placeholder="Search avatars..."
+      placeholder={strings.website.tools.gallery.search.hint}
       ref={input}
       onChange={(event) => {
         mutateGalleryEphemeral((draft) => {