feat: new admin page

This commit is contained in:
nameless 2023-11-10 02:38:10 +00:00
parent f678324889
commit 09cb438e0c
1 changed files with 55 additions and 25 deletions

View File

@ -160,11 +160,38 @@ function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
: null, : null,
(args) => fetchApi(...args).then(handleResponse), (args) => fetchApi(...args).then(handleResponse),
); );
const getAdminPhoto = useSWR(
["users/{userId}/photo", "GET", { params: { userId: String(admin.tgUserId) } }] as const,
(args) => fetchApi(...args).then(handleResponse).then((blob) => URL.createObjectURL(blob)),
);
return ( return (
<li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2"> <div className="max-h-sm rounded-md bg-zinc-100 dark:bg-zinc-800">
<p className="font-bold"> <div className="float-left flex flex-col p-10">
{getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}{" "} {/* user avatar */}
{getAdminUser.data
? (
getAdminPhoto.data
? (
<img
src={getAdminPhoto.data}
alt="avatar"
className="w-24 h-24 rounded-full shadow-lg"
/>
)
: (
<div className="w-9 h-9 rounded-full bg-zinc-400 dark:bg-zinc-500 flex items-center justify-center text-white text-2xl font-bold select-none">
{getAdminUser.data.first_name.at(0)?.toUpperCase()}
</div>
)
)
: null}
</div>
<div className="flex flex-col p-10">
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
{getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}
</h5>
<p className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
{getAdminUser.data?.username {getAdminUser.data?.username
? ( ? (
<a href={`https://t.me/${getAdminUser.data.username}`} className="link"> <a href={`https://t.me/${getAdminUser.data.username}`} className="link">
@ -173,6 +200,7 @@ function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
) )
: null} : null}
</p> </p>
<span className="text-sm text-gray-500 dark:text-gray-400">
{getAdminUser.data?.bio {getAdminUser.data?.bio
? ( ? (
<p> <p>
@ -180,6 +208,7 @@ function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
</p> </p>
) )
: null} : null}
</span>
{getUser.data?.admin && ( {getUser.data?.admin && (
<p className="flex gap-2"> <p className="flex gap-2">
<button <button
@ -190,12 +219,13 @@ function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
</button> </button>
</p> </p>
)} )}
</div>
<DeleteAdminDialog <DeleteAdminDialog
dialogRef={deleteDialogRef} dialogRef={deleteDialogRef}
adminId={admin.id} adminId={admin.id}
sessionId={sessionId} sessionId={sessionId}
/> />
</li> </div>
); );
} }