From 4a1f3ea12dd381b1a1a300596a6c8cf9b2511e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:49:11 -0500
Subject: [PATCH] feat: last updated time

---
 packages/website/src/components/Gallery/List.tsx   |  2 +-
 .../website/src/pages/tools/gallery/_index.tsx     | 14 +++++++++++++-
 .../website/src/pages/tools/gallery/index.astro    |  3 ++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/Gallery/List.tsx b/packages/website/src/components/Gallery/List.tsx
index 0855290b2..664b77dad 100644
--- a/packages/website/src/components/Gallery/List.tsx
+++ b/packages/website/src/components/Gallery/List.tsx
@@ -27,7 +27,7 @@ export function GalleryList({ avatars }: GalleryListProps) {
       return avatars;
     } else {
       return fuzzysort
-        .go(search, avatars, { key: 'name' })
+        .go(search, avatars, { keys: ['name', 'id'] })
         .map((result) => result.obj);
     }
   }, [search]);
diff --git a/packages/website/src/pages/tools/gallery/_index.tsx b/packages/website/src/pages/tools/gallery/_index.tsx
index 8c06e8cfd..9d840ee50 100644
--- a/packages/website/src/pages/tools/gallery/_index.tsx
+++ b/packages/website/src/pages/tools/gallery/_index.tsx
@@ -1,3 +1,5 @@
+import { InfoCircledIcon } 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';
@@ -5,11 +7,21 @@ import { GalleryEphemeral } from '../../../stores/galleryEphemeral';
 
 interface PageProps {
   avatars: Avatar[];
+  lastUpdated: string;
 }
 
-export function Page({ avatars }: PageProps) {
+export function Page({ avatars, lastUpdated }: PageProps) {
   return (
     <PageWrapper color="gold">
+      <Flex justify="center">
+        <Callout.Root size="1">
+          <Callout.Icon>
+            <InfoCircledIcon />
+          </Callout.Icon>
+          <Callout.Text>Last updated on {lastUpdated}</Callout.Text>
+        </Callout.Root>
+      </Flex>
+
       <GalleryEphemeral.Provider>
         <GallerySearch />
         <GalleryList avatars={avatars} />
diff --git a/packages/website/src/pages/tools/gallery/index.astro b/packages/website/src/pages/tools/gallery/index.astro
index 085c8e209..b917eca87 100644
--- a/packages/website/src/pages/tools/gallery/index.astro
+++ b/packages/website/src/pages/tools/gallery/index.astro
@@ -18,8 +18,9 @@ const avatars = Object.entries(glossary)
       ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
   )
   .sort((a, b) => a.name.localeCompare(b.name));
+const lastUpdated = new Date().toLocaleDateString();
 ---
 
 <ToolLayout tool={galleryTool}>
-  <Page {avatars} client:load />
+  <Page {avatars} {lastUpdated} client:load />
 </ToolLayout>