refactor: New Profile Card

feat: add Privacy Banner
feat: add user roles

app/components/Chip/Chip.tsx

@@ -5,12 +5,14 @@ export const Chip = (props: {
   name_2?: string;
   devider?: string;
   bg_color?: string;
+  style?: React.CSSProperties;
 }) => {
   return (
     <div
       className={`px-2 sm:px-4 py-0.5 sm:py-1 rounded-sm ${
         props.bg_color || "bg-gray-500"
       } ${props.icon_name ? "flex items-center justify-center gap-1" : ""}`}
+      style={props.style || {}}
     >
       {props.icon_name && (
         <span

app/components/Profile/Profile.PrivacyBanner.tsx

@@ -0,0 +1,18 @@
+import { unixToDate } from "#/api/utils";
+
+export const ProfilePrivacyBanner = (props: { is_privacy: boolean }) => {
+  return (
+    <>
+      {props.is_privacy && (
+        <div className="flex flex-col justify-between w-full p-4 border border-gray-200 rounded-md md:flex-row bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
+          <div className="mb-4 md:mb-0 md:me-4">
+            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
+              У пользователя установлены настройки приватности. Некоторая
+              информация для вас может быть недоступна.
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

app/components/Profile/Profile.User.tsx

@@ -0,0 +1,134 @@
+"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: {
+  isOnline: boolean;
+  avatar: string;
+  login: 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;
+    }[];
+  };
+}) => {
+  const router = useRouter();
+  console.log(props.chips);
+  return (
+    <Card className="w-full sm:w-[512px]">
+      {props.chips.hasChips && (
+        <div className="flex gap-1 overflow-x-auto scrollbar-thin">
+          {props.chips.isMyProfile && (
+            <Chip bg_color="bg-blue-500" name="Мой профиль" />
+          )}
+          {props.chips.isVerified && (
+            <Chip bg_color="bg-green-500" name="Верифицирован" />
+          )}
+          {props.chips.isSponsor && (
+            <Chip bg_color="bg-yellow-500" name="Спонсор Anixart" />
+          )}
+          {props.chips.isBlocked && (
+            <Chip bg_color="bg-yellow-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>
+      )}
+      <Avatar
+        alt=""
+        img={props.avatar}
+        rounded={true}
+        size={"lg"}
+        className="relative flex-col items-center justify-center sm:justify-start sm:flex-row"
+        bordered={true}
+        color={props.isOnline ? "success" : "light"}
+      >
+        <div className="space-y-1 text-2xl font-medium whitespace-pre-wrap dark:text-white">
+          <div className="text-center sm:text-left">{props.login}</div>
+          <div className="text-sm text-gray-500 whitespace-pre-wrap sm:text-md dark:text-gray-400 ">
+            {props.status}
+          </div>
+        </div>
+      </Avatar>
+      {props.socials.hasSocials && !props.socials.isPrivate && (
+        <div className="flex items-center gap-1 overflow-x-auto scrollbar-thin">
+          {props.socials.socials
+            .filter((social: any) => {
+              if (social.nickname == "") {
+                return false;
+              }
+              return true;
+            })
+            .map((social: any) => {
+              if (social.name == "discord" && social.nickname != "")
+                return (
+                  <Button
+                    color="light"
+                    key={social.name}
+                    onClick={() => {
+                      window.navigator.clipboard.writeText(social.nickname);
+                      alert("Скопировано!");
+                    }}
+                  >
+                    <div className="flex items-center justify-center gap-2">
+                      <span
+                        className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                      ></span>
+                      {social.nickname}
+                    </div>
+                  </Button>
+                );
+              return (
+                <Link
+                  key={social.name}
+                  href={`${social.urlPrefix}${social.nickname}`}
+                  target="_blank"
+                >
+                  <Button color="light">
+                    <div className="flex items-center justify-center gap-2">
+                      <span
+                        className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                      ></span>
+                      {social.nickname}
+                    </div>
+                  </Button>
+                </Link>
+              );
+            })}
+        </div>
+      )}
+    </Card>
+  );
+};

app/components/Profile/ProfileBannedBanner.tsx

@@ -0,0 +1,28 @@
+import { unixToDate } from "#/api/utils";
+
+export const ProfileBannedBanner = (props: {
+  is_banned: boolean;
+  is_perm_banned: boolean;
+  ban_reason: string;
+  ban_expires: number;
+}) => {
+  return (
+    <>
+      {(props.is_banned || props.is_perm_banned) && (
+        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md 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">
+              {props.is_perm_banned
+                ? "Пользователь был заблокирован администрацией навсегда"
+                : `Пользователь был заблокирован администрацией до
+              ${unixToDate(props.ban_expires)}`}
+            </h2>
+            <p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-200">
+              {props.ban_reason}
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

app/pages/Profile copy.tsx

@@ -0,0 +1,312 @@
+"use client";
+import { useUserStore } from "#/store/auth";
+import { useEffect, useState } from "react";
+import { Spinner } from "../components/Spinner/Spinner";
+import { Avatar, Card, Button, Table } from "flowbite-react";
+import { Chip } from "../components/Chip/Chip";
+import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils";
+import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
+import { ENDPOINTS } from "#/api/config";
+
+export const ProfilePage = (props: any) => {
+  const authUser = useUserStore((state) => state);
+  const [user, setUser] = useState(null);
+  const [isMyProfile, setIsMyProfile] = useState(false);
+
+  useEffect(() => {
+    async function _getData() {
+      let url = `${ENDPOINTS.user.profile}/${props.id}`;
+      if (authUser.token) {
+        url += `?token=${authUser.token}`;
+      }
+      const data = await fetchDataViaGet(url);
+      setUser(data.profile);
+      setIsMyProfile(data.is_my_profile);
+    }
+    _getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authUser]);
+
+  if (!user) {
+    return (
+      <main className="flex items-center justify-center min-h-screen">
+        <Spinner />
+      </main>
+    );
+  }
+
+  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 || isMyProfile;
+
+  return (
+    <main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4">
+      {(user.is_banned || user.is_perm_banned) && (
+        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md 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">
+              {user.is_perm_banned
+                ? "Пользователь был заблокирован администрацией навсегда"
+                : `Пользователь был заблокирован администрацией до
+              ${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">
+        <Card className="max-w-full">
+          {hasChips && (
+            <div className="flex gap-2 overflow-x-auto scrollbar-thin">
+              {isMyProfile && (
+                <Chip bg_color="bg-blue-500" name="Мой профиль" />
+              )}
+              {user.is_blocked && (
+                <Chip bg_color="bg-red-500" name="Заблокирован вами" />
+              )}
+              {user.is_verified && (
+                <Chip bg_color="bg-green-500" name="Подтверждён" />
+              )}
+            </div>
+          )}
+          <Avatar
+            img={user.avatar}
+            rounded={true}
+            bordered={true}
+            size="lg"
+            className="flex-col justify-start space-x-0 sm:flex-row sm:space-x-4"
+          >
+            <div className="mt-2 space-y-1 font-medium sm:mt-0 dark:text-white">
+              <div className="text-xl">{user.login}</div>
+              <p className="max-w-full text-sm text-gray-500 whitespace-pre-wrap dark:text-gray-400 sm:max-w-96">
+                {user.status}
+              </p>
+            </div>
+          </Avatar>
+          {hasSocials && (
+            <div className="flex gap-1 overflow-x-auto scrollbar-thin">
+              {socials
+                .filter((social: any) => {
+                  if (social.nickname == "") {
+                    return false;
+                  }
+                  return true;
+                })
+                .map((social: any) => {
+                  if (social.name == "discord" && social.nickname != "")
+                    return (
+                      <Button color="light" key={social.name} as="a">
+                        <div className="flex items-center justify-center gap-2">
+                          <span
+                            className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                          ></span>
+                          {social.nickname}
+                        </div>
+                      </Button>
+                    );
+                  return (
+                    <Button
+                      color="light"
+                      key={social.name}
+                      href={`${social.urlPrefix}/${social.nickname}`}
+                      className="[&:is(a)]:hover:bg-gray-100"
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <span
+                          className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
+                        ></span>
+                        {social.nickname}
+                      </div>
+                    </Button>
+                  );
+                })}
+            </div>
+          )}
+        </Card>
+        <div className="flex flex-wrap gap-4">
+          <Card className="flex-1 max-w-full">
+            <h1>Активность</h1>
+            <Table>
+              <Table.Body className="divide-y">
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Регистрация
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {unixToDate(user.register_date)}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Был(а) в сети
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {unixToDate(user.last_activity_time)}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Комментарий
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.comment_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    друзей
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.friend_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    видео
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.video_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    коллекций
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.collection_count}
+                  </Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          </Card>
+          <Card className="flex-1 max-w-full">
+            <h1>Статистика</h1>
+            <Table>
+              <Table.Body className="divide-y">
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--123 "></span>
+                    Просмотрено серий
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.watched_episode_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row className="hidden sm:table-row">
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
+                    Время просмотра
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
+                    {minutesToTime(user.watched_time) ||
+                      "Нет просмотренных серий."}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row className="table-row sm:hidden">
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
+                    {minutesToTime(user.watched_time) ||
+                      "Нет просмотренных серий."}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--play "></span>
+                    Смотрю
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.watching_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--note-multiple "></span>
+                    В Планах
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.plan_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--tick "></span>
+                    Просмотрено
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.completed_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--question-mark "></span>
+                    Отложено
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.hold_on_count}
+                  </Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    <span className="w-4 h-4 mr-2 iconify mdi--erase "></span>
+                    Брошено
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {user.dropped_count}
+                  </Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          </Card>
+        </div>
+      </div>
+      {user.history.length > 0 && (
+        <div className="px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800">
+          <ReleaseCourusel
+            sectionTitle="Недавно просмотренные"
+            content={user.history}
+          />
+        </div>
+      )}
+    </main>
+  );
+};

app/pages/Profile.tsx

@@ -2,12 +2,13 @@
 import { useUserStore } from "#/store/auth";
 import { useEffect, useState } from "react";
 import { Spinner } from "../components/Spinner/Spinner";
-import { Avatar, Card, Button, Table } from "flowbite-react";
-import { Chip } from "../components/Chip/Chip";
-import { fetchDataViaGet, unixToDate, minutesToTime } from "../api/utils";
-import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
+import { fetchDataViaGet } from "../api/utils";
 import { ENDPOINTS } from "#/api/config";
 
+import { ProfileUser } from "#/components/Profile/Profile.User";
+import { ProfileBannedBanner } from "#/components/Profile/ProfileBannedBanner";
+import { ProfilePrivacyBanner } from "#/components/Profile/Profile.PrivacyBanner";
+
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
   const [user, setUser] = useState(null);
@@ -47,13 +48,13 @@ export const ProfilePage = (props: any) => {
       name: "vk",
       nickname: user.vk_page,
       icon: "fa6-brands--vk",
-      urlPrefix: "https://vk.com",
+      urlPrefix: "https://vk.com/",
     },
     {
       name: "telegram",
       nickname: user.tg_page,
       icon: "fa6-brands--telegram",
-      urlPrefix: "https://t.me",
+      urlPrefix: "https://t.me/",
     },
     {
       name: "discord",
@@ -64,249 +65,58 @@ export const ProfilePage = (props: any) => {
       name: "tiktok",
       nickname: user.tt_page,
       icon: "fa6-brands--tiktok",
-      urlPrefix: "https://tiktok.com",
+      urlPrefix: "https://tiktok.com/@",
     },
     {
       name: "instagram",
       nickname: user.inst_page,
       icon: "fa6-brands--instagram",
-      urlPrefix: "https://instagram.com",
+      urlPrefix: "https://instagram.com/",
     },
   ];
 
-  const hasChips = user.is_verified || user.is_blocked || isMyProfile;
+  const hasChips =
+    user.is_verified ||
+    user.is_blocked ||
+    (user.roles && user.roles.length > 0) ||
+    isMyProfile;
+  const isPrivacy =
+    user.is_stats_hidden || user.is_counts_hidden || user.is_social_hidden;
 
   return (
-    <main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4">
-      {(user.is_banned || user.is_perm_banned) && (
-        <div className="flex flex-col justify-between w-full p-4 border border-red-200 rounded-md 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">
-              {user.is_perm_banned
-                ? "Пользователь был заблокирован администрацией навсегда"
-                : `Пользователь был заблокирован администрацией до
-              ${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">
-        <Card className="max-w-full">
-          {hasChips && (
-            <div className="flex gap-2 overflow-x-auto scrollbar-thin">
-              {isMyProfile && (
-                <Chip bg_color="bg-blue-500" name="Мой профиль" />
-              )}
-              {user.is_blocked && (
-                <Chip bg_color="bg-red-500" name="Заблокирован вами" />
-              )}
-              {user.is_verified && (
-                <Chip bg_color="bg-green-500" name="Подтверждён" />
-              )}
-            </div>
-          )}
-          <Avatar
-            img={user.avatar}
-            rounded={true}
-            bordered={true}
-            size="lg"
-            className="flex-col justify-start space-x-0 sm:flex-row sm:space-x-4"
-          >
-            <div className="mt-2 space-y-1 font-medium sm:mt-0 dark:text-white">
-              <div className="text-xl">{user.login}</div>
-              <p className="max-w-full text-sm text-gray-500 whitespace-pre-wrap dark:text-gray-400 sm:max-w-96">
-                {user.status}
-              </p>
-            </div>
-          </Avatar>
-          {hasSocials && (
-            <div className="flex gap-1 overflow-x-auto scrollbar-thin">
-              {socials
-                .filter((social: any) => {
-                  if (social.nickname == "") {
-                    return false;
-                  }
-                  return true;
-                })
-                .map((social: any) => {
-                  if (social.name == "discord" && social.nickname != "")
-                    return (
-                      <Button color="light" key={social.name} as="a">
-                        <div className="flex items-center justify-center gap-2">
-                          <span
-                            className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                          ></span>
-                          {social.nickname}
-                        </div>
-                      </Button>
-                    );
-                  return (
-                    <Button
-                      color="light"
-                      key={social.name}
-                      href={`${social.urlPrefix}/${social.nickname}`}
-                      className="[&:is(a)]:hover:bg-gray-100"
-                    >
-                      <div className="flex items-center justify-center gap-2">
-                        <span
-                          className={`iconify h-4 w-4 sm:h-6 sm:w-6 ${social.icon} dark:fill-white`}
-                        ></span>
-                        {social.nickname}
-                      </div>
-                    </Button>
-                  );
-                })}
-            </div>
-          )}
-        </Card>
-        <div className="flex flex-wrap gap-4">
-          <Card className="flex-1 max-w-full">
-            <h1>Активность</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Регистрация
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.register_date)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Был(а) в сети
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {unixToDate(user.last_activity_time)}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    Комментарий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.comment_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    друзей
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.friend_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    видео
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.video_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    коллекций
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.collection_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-          <Card className="flex-1 max-w-full">
-            <h1>Статистика</h1>
-            <Table>
-              <Table.Body className="divide-y">
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--123 "></span>
-                    Просмотрено серий
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watched_episode_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="hidden sm:table-row">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    Время просмотра
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row className="table-row sm:hidden">
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
-                    {minutesToTime(user.watched_time) ||
-                      "Нет просмотренных серий."}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--play "></span>
-                    Смотрю
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.watching_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--note-multiple "></span>
-                    В Планах
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.plan_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--tick "></span>
-                    Просмотрено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.completed_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--question-mark "></span>
-                    Отложено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.hold_on_count}
-                  </Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    <span className="w-4 h-4 mr-2 iconify mdi--erase "></span>
-                    Брошено
-                  </Table.Cell>
-                  <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                    {user.dropped_count}
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Card>
-        </div>
+    <>
+      <div className="flex flex-col gap-2">
+        <ProfileBannedBanner
+          is_banned={user.is_banned}
+          is_perm_banned={user.is_perm_banned}
+          ban_reason={user.ban_reason}
+          ban_expires={user.ban_expires}
+        />
+        <ProfilePrivacyBanner is_privacy={isPrivacy} />
       </div>
-      {user.history.length > 0 && (
-        <div className="px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800">
-          <ReleaseCourusel
-            sectionTitle="Недавно просмотренные"
-            content={user.history}
-          />
-        </div>
-      )}
-    </main>
+      <div className="mt-4">
+        <ProfileUser
+          isOnline={user.is_online}
+          avatar={user.avatar}
+          login={user.login}
+          status={user.status}
+          socials={{
+            isPrivate: user.is_social_hidden,
+            hasSocials: hasSocials,
+            socials: socials,
+          }}
+          chips={
+            {
+              hasChips: hasChips,
+              isMyProfile: isMyProfile,
+              isVerified: user.is_verified,
+              isSponsor: user.is_sponsor,
+              isBlocked: user.is_blocked,
+              roles: user.roles
+            }
+          }
+        />
+      </div>
+    </>
   );
 };