feat: separate armors

packages/preforged/tools/gallery/_index.tsx

@@ -0,0 +1,53 @@
+import { literals } from '@blitzkit/i18n/src/literals';
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { Callout, Flex } from '@radix-ui/themes';
+import { GalleryList, type Avatar } from '../../../../components/Gallery/List';
+import { GallerySearch } from '../../../../components/Gallery/Search';
+import { PageWrapper } from '../../../../components/PageWrapper';
+import {
+  LocaleProvider,
+  useLocale,
+  type LocaleAcceptorProps,
+} from '../../../../hooks/useLocale';
+import { GalleryEphemeral } from '../../../../stores/galleryEphemeral';
+
+interface ContentProps {
+  avatars: Avatar[];
+  lastUpdated: string;
+}
+
+type PageProps = ContentProps & LocaleAcceptorProps;
+
+export function Page({ locale, ...props }: PageProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content {...props} />
+    </LocaleProvider>
+  );
+}
+
+function Content({ avatars, lastUpdated }: ContentProps) {
+  const { strings } = useLocale();
+
+  return (
+    <PageWrapper maxWidth="80rem" color="gold">
+      <Flex justify="center">
+        <Callout.Root size="1">
+          <Callout.Icon>
+            <CalendarIcon />
+          </Callout.Icon>
+          <Callout.Text>
+            {literals(strings.website.tools.gallery.last_updated, [
+              lastUpdated,
+            ])}
+          </Callout.Text>
+        </Callout.Root>
+      </Flex>
+
+      <GalleryEphemeral.Provider>
+        <GallerySearch />
+        <GalleryList avatars={avatars} />
+      </GalleryEphemeral.Provider>
+    </PageWrapper>
+  );
+}

packages/preforged/tools/gallery/index.astro

@@ -0,0 +1,29 @@
+---
+import type { Avatar } from '../../../../components/Gallery/List';
+import { galleryTool } from '../../../../constants/tools';
+import { fetchGlossary } from '../../../../core/blitz/fetchGlossary';
+import ToolLayout from '../../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../../index.astro';
+
+const { locale } = Astro.params;
+const glossary = await fetchGlossary(locale);
+const avatars = Object.entries(glossary)
+  .filter(
+    ([key, value]) =>
+      key.startsWith('avatar') &&
+      !key.endsWith('_part') &&
+      value.image_url !== null,
+  )
+  .map(
+    ([key, value]) =>
+      ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
+  )
+  .sort((a, b) => a.name.localeCompare(b.name));
+const lastUpdated = new Date().toLocaleDateString(locale);
+---
+
+<ToolLayout tool={galleryTool}>
+  <Page {locale} {avatars} {lastUpdated} client:load />
+</ToolLayout>