feat: results count

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

@@ -1,4 +1,4 @@
-import { Flex } from '@radix-ui/themes';
+import { Flex, Text } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
 import { useMemo, useState } from 'react';
@@ -14,8 +14,8 @@ export interface Avatar {
   id: string;
 }
 
-const DEFAULT_LOADED = 25;
+const DEFAULT_LOADED = 42;
-const PREVIEW_COUNT = 10;
+const PREVIEW_COUNT = 14;
 
 export function GalleryList({ avatars }: GalleryListProps) {
   const search = GalleryEphemeral.use((state) => state.search);
@@ -33,6 +33,11 @@ export function GalleryList({ avatars }: GalleryListProps) {
   }, [search]);
 
   return (
+    <>
+      <Text align="center" color="gray">
+        {filtered.length.toLocaleString()} avatars
+      </Text>
+
       <Flex wrap="wrap" gap="4">
         {filtered.slice(0, loadedCards).map((avatar) => (
           <GalleryCard key={avatar.id} id={avatar.id} name={avatar.name} />
@@ -49,5 +54,6 @@ export function GalleryList({ avatars }: GalleryListProps) {
           ),
         )}
       </Flex>
+    </>
   );
 }