Merge pull request #1290 from GW2Treasures/feature/gravatar

Add experimental gravatar image in admin user list

Author: darthmaim

apps/web/app/admin/users/page.tsx

@@ -11,6 +11,7 @@ import { ensureUserIsAdmin } from '../admin';
 import { Tip } from '@gw2treasures/ui/components/Tip/Tip';
 import { ProviderIcon } from '@/components/Provider/Provider';
 import { FlexRow } from '@gw2treasures/ui/components/Layout/FlexRow';
+import { Gravatar } from '@/components/User/Gravatar';
 
 function getUsers() {
   return db.user.findMany({
@@ -35,7 +36,7 @@ export default async function AdminUserPage() {
 
       <Users.Table>
         <Users.Column id="id" title="Id" hidden>{({ id }) => <Code inline borderless>{id}</Code>}</Users.Column>
-        <Users.Column id="name" title="Username" sortBy="name">{({ name }) => name}</Users.Column>
+        <Users.Column id="name" title="Username" sortBy="name">{({ name, defaultEmail }) => <FlexRow><Gravatar email={defaultEmail?.email}/>{name}</FlexRow>}</Users.Column>
         <Users.Column id="providers" title="Providers" sortBy="name">
           {({ providers }) => (
             <FlexRow wrap>

apps/web/components/User/Gravatar.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @next/next/no-img-element */
+import { createHash } from 'node:crypto';
+import { FC } from 'react';
+
+interface GravatarProps {
+  email?: string
+}
+
+export const Gravatar: FC<GravatarProps> = ({ email }) => {
+  if(!email) {
+    return null;
+  }
+
+  const hash = createHash('sha256').update(email.trim().toLocaleLowerCase()).digest('hex');
+
+  return (
+    <img src={`https://gravatar.com/avatar/${hash}?s=48`} alt="" width={24} height={24} style={{ borderRadius: 2 }}/>
+  );
+};