Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add new user banned info on profile.

Browse source 
fix: social buttons cut out
fix: social button icon on dark theme is black
fix: user avatar shrink on mobile is status is too long
This commit is contained in:
Kentai Radiquum 2024-08-11 17:53:37 +05:00
parent c640b84a49
commit 04c072fba7
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 40 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
app/pages/Profile.tsx
View file

@ -73,52 +73,69 @@ export const ProfilePage = (props: any) => {
}, },
]; ];
const hasChips = user.is_verified || user.is_blocked || isMyProfile;
return ( return (
<main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4"> <main className="container flex flex-col gap-4 pt-4 px-4 pb-32 mx-auto overflow-hidden sm:pb-4">
{user.is_banned && (
<div className="flex flex-col justify-between w-full rounded-md p-4 border border-red-200 md:flex-row bg-red-50 dark:bg-red-700 dark:border-red-600">
<div className="mb-4 md:mb-0 md:me-4">
<h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">
Пользователь был заблокирован администрацией до{" "}
{unixToDate(user.ban_expires)}
</h2>
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
{user.ban_reason}
</p>
</div>
</div>
)}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Card className="max-w-full"> <Card className="max-w-full">
<div className="flex gap-2"> {hasChips && (
{isMyProfile && <Chip bg_color="bg-blue-500" name="Мой профиль" />} <div className="flex gap-2 overflow-x-auto scrollbar-thin">
{user.is_banned && ( {isMyProfile && (
<Chip bg_color="bg-red-500" name="Заблокирован" /> <Chip bg_color="bg-blue-500" name="Мой профиль" />
)} )}
{user.is_verified && ( {user.is_blocked && (
<Chip bg_color="bg-green-500" name="Подтвержден" /> <Chip bg_color="bg-red-500" name="Заблокирован вами" />
)} )}
</div> {user.is_verified && (
<Chip bg_color="bg-green-500" name="Подтверждён" />
)}
</div>
)}
<Avatar <Avatar
img={user.avatar} img={user.avatar}
rounded={true} rounded={true}
bordered={true} bordered={true}
size="lg" size="lg"
className="justify-start" className="justify-start flex-col sm:flex-row space-x-0 sm:space-x-4"
> >
<div className="space-y-1 font-medium dark:text-white"> <div className="mt-2 sm:mt-0 space-y-1 font-medium dark:text-white">
<div className="text-xl">{user.login}</div> <div className="text-xl">{user.login}</div>
<div className="text-sm text-gray-500 whitespace-pre dark:text-gray-400 max-w-64"> <p className="text-sm text-gray-500 dark:text-gray-400 max-w-full sm:max-w-96 whitespace-pre-wrap">
{user.status} {user.status}
</div> </p>
</div> </div>
</Avatar> </Avatar>
{hasSocials && ( {hasSocials && (
<Button.Group <div className="overflow-x-auto scrollbar-thin flex gap-1">
outline={true}
className="overflow-x-auto scrollbar-thin"
>
{socials {socials
.filter((social: any) => { .filter((social: any) => {
if (!social.nickname) { if (social.nickname == "") {
return false; return false;
} }
return true; return true;
}) })
.map((social: any) => { .map((social: any) => {
if (social.name == "discord") if (social.name == "discord" && social.nickname != "")
return ( return (
<Button color="light" key={social.name} as="a"> <Button color="light" key={social.name} as="a">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<span <span
className={`iconify-color h-4 w-4 sm:h-6 sm:w-6 ${social.icon}`} className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
></span> ></span>
{social.nickname} {social.nickname}
</div> </div>
@ -133,14 +150,14 @@ export const ProfilePage = (props: any) => {
> >
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<span <span
className={`iconify-color h-4 w-4 sm:h-6 sm:w-6 ${social.icon}`} className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
></span> ></span>
{social.nickname} {social.nickname}
</div> </div>
</Button> </Button>
); );
})} })}
</Button.Group> </div>
)} )}
</Card> </Card>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">