mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 15:54:39 +00:00
refactor: start redesign of user page
This commit is contained in:
parent
68a7117a97
commit
8cf1bb534d
GPG key ID:
858E8EE696525EED
5 changed files with 211 additions and 185 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -59,3 +59,5 @@ videos/*
|
||||||
!videos/*.js
|
!videos/*.js
|
||||||
!videos/*.ts
|
!videos/*.ts
|
||||||
public/_next-video
|
public/_next-video
|
||||||
|
|
||||||
|
API-Trace/*
|
||||||
15
app/components/Profile/Profile.Role.tsx
Normal file
15
app/components/Profile/Profile.Role.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
interface UserRoleProps {
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UserRole = ({ name, color }: UserRoleProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`text-[var(--color)] border border-[var(--color)] rounded-md`}
|
||||||
|
style={{ "--color": `#${color}` } as React.CSSProperties}
|
||||||
|
>
|
||||||
|
<p className="px-1.5 py-0.5">{name}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
20
app/components/Profile/Profile.Social.tsx
Normal file
20
app/components/Profile/Profile.Social.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
interface UserSocialProps {
|
||||||
|
icon: string;
|
||||||
|
url?: string;
|
||||||
|
nickname: string;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UserSocial = ({ nickname, icon, color }: UserSocialProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`border border-[var(--color)] rounded-md`}
|
||||||
|
style={{ "--color": `#${color}` } as React.CSSProperties}
|
||||||
|
>
|
||||||
|
<div className="flex gap-1 items-center px-1.5 py-1">
|
||||||
|
<span className={`iconify w-6 h-6 bg-[var(--color)] ${icon}`}></span>
|
||||||
|
<p>{nickname}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,143 +1,150 @@
|
||||||
"use client";
|
"use client";
|
||||||
import { Avatar, Card, Button } from "flowbite-react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { Chip } from "../Chip/Chip";
|
|
||||||
|
|
||||||
export const ProfileUser = (props: {
|
import { Avatar, Card, useThemeMode } from "flowbite-react";
|
||||||
isOnline: boolean;
|
import { UserRole } from "./Profile.Role";
|
||||||
|
import { UserSocial } from "./Profile.Social";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
interface ProfileUserProps {
|
||||||
avatar: string;
|
avatar: string;
|
||||||
login: string;
|
login: string;
|
||||||
status: string;
|
status: string;
|
||||||
socials: {
|
|
||||||
isPrivate: boolean;
|
|
||||||
hasSocials: boolean;
|
|
||||||
socials: {
|
|
||||||
name: string;
|
|
||||||
nickname: any;
|
|
||||||
icon: string;
|
|
||||||
urlPrefix?: string | undefined;
|
|
||||||
}[];
|
|
||||||
};
|
|
||||||
chips: {
|
|
||||||
hasChips: boolean;
|
|
||||||
isMyProfile: boolean;
|
|
||||||
isVerified: boolean;
|
|
||||||
isSponsor: boolean;
|
|
||||||
isBlocked: boolean;
|
|
||||||
roles?: {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
color: string;
|
|
||||||
}[];
|
|
||||||
};
|
|
||||||
rating: number;
|
rating: number;
|
||||||
}) => {
|
roles: {
|
||||||
const router = useRouter();
|
id: number;
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
}[];
|
||||||
|
isMyProfile: boolean;
|
||||||
|
isSponsor: boolean;
|
||||||
|
isBlocked: boolean;
|
||||||
|
isVerified: boolean;
|
||||||
|
isOnline: boolean;
|
||||||
|
socials: {
|
||||||
|
vk: string;
|
||||||
|
tg: string;
|
||||||
|
tt: string;
|
||||||
|
inst: string;
|
||||||
|
discord: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProfileUser = ({
|
||||||
|
avatar,
|
||||||
|
login,
|
||||||
|
status,
|
||||||
|
rating,
|
||||||
|
roles,
|
||||||
|
isMyProfile,
|
||||||
|
isVerified,
|
||||||
|
isOnline,
|
||||||
|
isSponsor,
|
||||||
|
isBlocked,
|
||||||
|
socials,
|
||||||
|
}: ProfileUserProps) => {
|
||||||
|
|
||||||
|
const theme = useThemeMode().mode;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="h-fit">
|
<Card>
|
||||||
{props.chips.hasChips && (
|
{(isMyProfile ||
|
||||||
<div className="flex gap-1 overflow-x-auto scrollbar-thin">
|
isVerified ||
|
||||||
{props.chips.isMyProfile && (
|
isSponsor ||
|
||||||
<Chip bg_color="bg-blue-500" name="Мой профиль" />
|
isBlocked ||
|
||||||
)}
|
roles.length > 0) && (
|
||||||
{props.chips.isVerified && (
|
<div className="flex flex-wrap gap-2">
|
||||||
<Chip bg_color="bg-green-500" name="Верифицирован" />
|
{isMyProfile && <UserRole name="Мой профиль" color="3f83f8" />}
|
||||||
)}
|
{isBlocked && <UserRole name="Заблокирован" color="f56565" />}
|
||||||
{props.chips.isSponsor && (
|
{isVerified && <UserRole name="Верифицирован" color="0e9f6e" />}
|
||||||
<Chip bg_color="bg-yellow-500" name="Спонсор Anixart" />
|
{isSponsor && <UserRole name="Спонсор Anixart" color="ecc94b" />}
|
||||||
)}
|
{roles.map((role) => (
|
||||||
{props.chips.isBlocked && (
|
<UserRole key={role.id} name={role.name} color={role.color} />
|
||||||
<Chip bg_color="bg-red-500" name="Заблокирован" />
|
))}
|
||||||
)}
|
|
||||||
{props.chips.roles &&
|
|
||||||
props.chips.roles.length > 0 &&
|
|
||||||
props.chips.roles.map((role: any) => (
|
|
||||||
<Chip
|
|
||||||
key={role.id}
|
|
||||||
bg_color={`bg-[var(--role-color)]`}
|
|
||||||
name={role.name}
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--role-color": `#${role.color}`,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<Avatar
|
<div className="flex flex-col items-center gap-4 sm:items-start sm:flex-row">
|
||||||
alt=""
|
<Avatar
|
||||||
img={props.avatar}
|
alt=""
|
||||||
rounded={true}
|
img={avatar}
|
||||||
size={"lg"}
|
rounded={true}
|
||||||
className="relative flex-col items-center justify-center sm:justify-start sm:flex-row"
|
size={"lg"}
|
||||||
bordered={true}
|
bordered={true}
|
||||||
color={props.isOnline ? "success" : "light"}
|
color={isOnline ? "success" : "light"}
|
||||||
>
|
className="flex-shrink-0"
|
||||||
<div className="space-y-1 text-2xl font-medium whitespace-pre-wrap dark:text-white">
|
/>
|
||||||
<div className="text-center sm:text-left">
|
<div className="flex flex-col gap-2">
|
||||||
{props.login}{" "}
|
<p className="flex items-center gap-2 text-2xl font-semibold">
|
||||||
|
{login}
|
||||||
<span
|
<span
|
||||||
className={`border rounded-md px-2 py-1 text-sm ${
|
className={`border rounded-md px-2 py-1 min-w-8 text-sm flex items-center justify-center ${
|
||||||
props.rating > 0
|
rating > 0 ?
|
||||||
? "border-green-500 text-green-500"
|
"border-green-500 text-green-500"
|
||||||
: "border-red-500 text-red-500"
|
: "border-red-500 text-red-500"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{props.rating}
|
{rating}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</p>
|
||||||
<div className="text-sm text-gray-500 whitespace-pre-wrap sm:text-md dark:text-gray-400 ">
|
<p className="text-sm whitespace-pre-wrap sm:text-md">{status}</p>
|
||||||
{props.status}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Avatar>
|
</div>
|
||||||
{props.socials.hasSocials && !props.socials.isPrivate && (
|
{(socials.vk ||
|
||||||
<div className="flex items-center gap-1 overflow-x-auto scrollbar-thin">
|
socials.tg ||
|
||||||
{props.socials.socials
|
socials.discord ||
|
||||||
.filter((social: any) => {
|
socials.tt ||
|
||||||
if (social.nickname == "") {
|
socials.inst) && (
|
||||||
return false;
|
<div className="flex flex-wrap gap-2">
|
||||||
}
|
{socials.vk && (
|
||||||
return true;
|
<Link href={`https://vk.com/${socials.vk}`} target="_blank">
|
||||||
})
|
<UserSocial
|
||||||
.map((social: any) => {
|
nickname={socials.vk}
|
||||||
if (social.name == "discord" && social.nickname != "")
|
icon="fa6-brands--vk"
|
||||||
return (
|
url={`https://vk.com/${socials.vk}`}
|
||||||
<Button
|
color="4a76a8"
|
||||||
color="light"
|
/>
|
||||||
key={social.name}
|
</Link>
|
||||||
onClick={() => {
|
)}
|
||||||
window.navigator.clipboard.writeText(social.nickname);
|
{socials.tg && (
|
||||||
alert("Скопировано!");
|
<Link href={`https://t.me/${socials.tg}`} target="_blank">
|
||||||
}}
|
<UserSocial
|
||||||
>
|
nickname={socials.tg}
|
||||||
<div className="flex items-center justify-center gap-2">
|
icon="fa6-brands--telegram"
|
||||||
<span
|
url={`https://t.me/${socials.tg}`}
|
||||||
className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
|
color="2aabee"
|
||||||
></span>
|
/>
|
||||||
{social.nickname}
|
</Link>
|
||||||
</div>
|
)}
|
||||||
</Button>
|
{socials.tt && (
|
||||||
);
|
<Link href={`https://tiktok.com/@${socials.tt}`} target="_blank">
|
||||||
return (
|
<UserSocial
|
||||||
<Link
|
nickname={socials.tt}
|
||||||
key={social.name}
|
icon="fa6-brands--tiktok"
|
||||||
href={`${social.urlPrefix}${social.nickname}`}
|
url={`https://tiktok.com/@${socials.tt}`}
|
||||||
target="_blank"
|
color={theme == "light" ? "000000" : "ffffff"}
|
||||||
>
|
/>
|
||||||
<Button color="light">
|
</Link>
|
||||||
<div className="flex items-center justify-center gap-2">
|
)}
|
||||||
<span
|
{socials.inst && (
|
||||||
className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
|
<Link
|
||||||
></span>
|
href={`https://instagram.com/${socials.inst}`}
|
||||||
{social.nickname}
|
target="_blank"
|
||||||
</div>
|
>
|
||||||
</Button>
|
<UserSocial
|
||||||
</Link>
|
nickname={socials.inst}
|
||||||
);
|
icon="fa6-brands--instagram"
|
||||||
})}
|
url={`https://instagram.com/${socials.inst}`}
|
||||||
|
color="c32aa3"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{socials.discord && (
|
||||||
|
<UserSocial
|
||||||
|
nickname={socials.discord}
|
||||||
|
icon="fa6-brands--discord"
|
||||||
|
url={`https://discord.com/${socials.discord}`}
|
||||||
|
color="5865f2"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -59,50 +59,7 @@ export const ProfilePage = (props: any) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasSocials =
|
|
||||||
user.vk_page != "" ||
|
|
||||||
user.tg_page != "" ||
|
|
||||||
user.tt_page != "" ||
|
|
||||||
user.inst_page != "" ||
|
|
||||||
user.discord_page != "" ||
|
|
||||||
false;
|
|
||||||
const socials = [
|
|
||||||
{
|
|
||||||
name: "vk",
|
|
||||||
nickname: user.vk_page,
|
|
||||||
icon: "fa6-brands--vk",
|
|
||||||
urlPrefix: "https://vk.com/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "telegram",
|
|
||||||
nickname: user.tg_page,
|
|
||||||
icon: "fa6-brands--telegram",
|
|
||||||
urlPrefix: "https://t.me/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "discord",
|
|
||||||
nickname: user.discord_page,
|
|
||||||
icon: "fa6-brands--discord",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "tiktok",
|
|
||||||
nickname: user.tt_page,
|
|
||||||
icon: "fa6-brands--tiktok",
|
|
||||||
urlPrefix: "https://tiktok.com/@",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "instagram",
|
|
||||||
nickname: user.inst_page,
|
|
||||||
icon: "fa6-brands--instagram",
|
|
||||||
urlPrefix: "https://instagram.com/",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const hasChips =
|
|
||||||
user.is_verified ||
|
|
||||||
user.is_blocked ||
|
|
||||||
(user.roles && user.roles.length > 0) ||
|
|
||||||
isMyProfile;
|
|
||||||
const isPrivacy =
|
const isPrivacy =
|
||||||
user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden;
|
user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden;
|
||||||
|
|
||||||
|
|
@ -120,7 +77,45 @@ export const ProfilePage = (props: any) => {
|
||||||
is_me_blocked={user.is_me_blocked}
|
is_me_blocked={user.is_me_blocked}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<ProfileUser
|
||||||
|
avatar={user.avatar}
|
||||||
|
login={user.login}
|
||||||
|
status={user.status}
|
||||||
|
roles={user.roles}
|
||||||
|
rating={user.rating_score}
|
||||||
|
isMyProfile={isMyProfile}
|
||||||
|
isVerified={user.is_verified}
|
||||||
|
isOnline={user.is_online}
|
||||||
|
isSponsor={user.is_sponsor}
|
||||||
|
isBlocked={user.is_blocked}
|
||||||
|
socials={{
|
||||||
|
vk: user.vk_page || null,
|
||||||
|
tg: user.tg_page || null,
|
||||||
|
tt: user.tt_page || null,
|
||||||
|
inst: user.inst_page || null,
|
||||||
|
discord: user.discord_page || null,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{authUser.token && (
|
||||||
|
<ProfileActions
|
||||||
|
isMyProfile={isMyProfile}
|
||||||
|
profile_id={user.id}
|
||||||
|
isFriendRequestsDisallowed={user.is_friend_requests_disallowed}
|
||||||
|
friendStatus={user.friend_status}
|
||||||
|
my_profile_id={authUser.user.id}
|
||||||
|
token={authUser.token}
|
||||||
|
is_me_blocked={user.is_me_blocked}
|
||||||
|
is_blocked={user.is_blocked}
|
||||||
|
edit_isOpen={isOpen}
|
||||||
|
edit_setIsOpen={setIsOpen}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2"></div>
|
||||||
|
</div>
|
||||||
|
{/* <div
|
||||||
className={`flex flex-wrap gap-2 ${
|
className={`flex flex-wrap gap-2 ${
|
||||||
isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
|
isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
|
||||||
}`}
|
}`}
|
||||||
|
|
@ -171,20 +166,7 @@ export const ProfilePage = (props: any) => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col w-full gap-2 xl:flex-1 xl:w-auto ">
|
<div className="flex flex-col w-full gap-2 xl:flex-1 xl:w-auto ">
|
||||||
{authUser.token && (
|
|
||||||
<ProfileActions
|
|
||||||
isMyProfile={isMyProfile}
|
|
||||||
profile_id={user.id}
|
|
||||||
isFriendRequestsDisallowed={user.is_friend_requests_disallowed}
|
|
||||||
friendStatus={user.friend_status}
|
|
||||||
my_profile_id={authUser.user.id}
|
|
||||||
token={authUser.token}
|
|
||||||
is_me_blocked={user.is_me_blocked}
|
|
||||||
is_blocked={user.is_blocked}
|
|
||||||
edit_isOpen={isOpen}
|
|
||||||
edit_setIsOpen={setIsOpen}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!user.is_stats_hidden && (
|
{!user.is_stats_hidden && (
|
||||||
<>
|
<>
|
||||||
<ProfileStats
|
<ProfileStats
|
||||||
|
|
@ -215,7 +197,7 @@ export const ProfilePage = (props: any) => {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
<ProfileEditModal
|
<ProfileEditModal
|
||||||
isOpen={isOpen && isMyProfile}
|
isOpen={isOpen && isMyProfile}
|
||||||
setIsOpen={setIsOpen}
|
setIsOpen={setIsOpen}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue