wip(org): Working on stats/users pages

sites/shared/components/user-profile.mjs

@@ -0,0 +1,42 @@
+import { cloudflareImageUrl } from 'shared/utils.mjs'
+import { Fingerprint } from 'shared/components/fingerprint.mjs'
+import { Role } from 'shared/components/role.mjs'
+import { Mdx } from 'shared/components/mdx/dynamic.mjs'
+
+export const UserProfile = ({ user }) => (
+  <>
+    <div className="text-center max-w-prose">
+      <img
+        src={cloudflareImageUrl({ id: `uid-${user.ihash}` })}
+        className="mx-auto max-w-96 shrink-0 grow-0 rounded-full shadow"
+      />
+      <div className="w-2/3 px-8">
+        <h2 className="flex flex-row items-center justify-between w-full">
+          {user.username}
+          <Fingerprint id={user.id} />
+          <Role role={user.role} />
+          <span>{user.role}</span>
+        </h2>
+        <table>
+          <thead>
+            <tr>
+              <th>k</th>
+              <th>v</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{user.username}</td>
+              <td>username</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <img
+        src={cloudflareImageUrl({ id: `uid-${user.ihash}` })}
+        className="w-1/3 shrink-0 grow-0 rounded-lg shadow"
+      />
+    </div>
+    <Mdx md={user.bio} />
+  </>
+)