feat: add user activity

app/components/Profile/Profile.Activity.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { Card } from "flowbite-react";
+import Link from "next/link";
+import { numberDeclension } from "#/api/utils";
+
+export function ProfileActivity(props: {
+  profile_id: number;
+  commentCount: number;
+  videoCount: number;
+  collectionCount: number;
+  friendsCount: number;
+}) {
+  return (
+    <Card className="w-full md:w-[325px]">
+      <h1 className="text-2xl font-bold">Активность</h1>
+      <div className="flex items-center gap-4 text-lg">
+        <div>
+          <p>
+            {props.commentCount}{" "}
+            {numberDeclension(
+              props.commentCount,
+              "комментарий",
+              "комментария",
+              "комментариев"
+            )}
+          </p>
+          <p className="mt-2">{props.videoCount} видео</p>
+        </div>
+        <div>
+          <Link href={`/profile/${props.profile_id}/collections`}>
+            <p className="border-b-2 border-gray-300 border-solid dark:border-gray-400 hover:border-gray-500 dark:hover:border-gray-200">
+              {props.collectionCount}{" "}
+              {numberDeclension(
+                props.commentCount,
+                "коллекция",
+                "коллекции",
+                "коллекций"
+              )}
+            </p>
+          </Link>
+          <p className="mt-2">
+            {props.friendsCount}{" "}
+            {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}

app/pages/Profile.tsx

@@ -8,6 +8,7 @@ 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";
+import { ProfileActivity } from "#/components/Profile/Profile.Activity";
 
 export const ProfilePage = (props: any) => {
   const authUser = useUserStore((state) => state);
@@ -95,9 +96,9 @@ export const ProfilePage = (props: any) => {
         <ProfilePrivacyBanner is_privacy={isPrivacy} />
       </div>
       <div
-        className={
+        className={`flex flex-wrap gap-2 ${
           isPrivacy || user.is_banned || user.is_perm_banned ? "mt-4" : ""
-        }
+        }`}
       >
         <ProfileUser
           isOnline={user.is_online}
@@ -119,6 +120,15 @@ export const ProfilePage = (props: any) => {
           }}
           rating={user.rating_score}
         />
+        {!user.is_stats_hidden && (
+          <ProfileActivity
+            profile_id={user.id}
+            commentCount={user.comment_count}
+            videoCount={user.video_count}
+            collectionCount={user.collection_count}
+            friendsCount={user.friend_count}
+          />
+        )}
       </div>
     </>
   );