43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
|
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} />
|
||
|
|
</>
|
||
|
|
)
|