feat: sort

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -1,6 +1,8 @@
+import { useMemo } from "react";
 import { AvatarCard } from "../../../components/AvatarCard";
 import { api } from "../../../core/api/dynamic";
 import { useAwait } from "../../../hooks/useAwait";
+import { useGameStrings } from "../../../hooks/useGameStrings";
 import { LocaleProvider } from "../../../hooks/useLocale";
 
 interface PageProps extends ContentProps {
@@ -21,10 +23,25 @@ interface ContentProps {
 
 function Content({ skeleton }: ContentProps) {
   const { avatars } = useAwait(() => api.avatars(), "avatars");
+  const profileAvatarEntityStrings = useGameStrings("ProfileAvatarEntity");
+  const ordered = useMemo(
+    () =>
+      avatars.sort((a, b) => {
+        const nameA =
+          profileAvatarEntityStrings[a.stuff_ui!.display_name] ??
+          a.stuff_ui!.display_name;
+        const nameB =
+          profileAvatarEntityStrings[b.stuff_ui!.display_name] ??
+          b.stuff_ui!.display_name;
+
+        return nameA.localeCompare(nameB);
+      }),
+    []
+  );
 
   return (
     <div className="avatars">
-      {avatars.slice(0, 12).map((avatar) => (
+      {ordered.slice(0, 12).map((avatar) => (
         <AvatarCard key={avatar.name} avatar={avatar} />
       ))}
     </div>