From 5c23f204dac3a2be66843bf4fece28dfde403cd5 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 23 Aug 2024 20:41:43 +0500
Subject: [PATCH] feat: add user activity

---
 app/components/Profile/Profile.Activity.tsx | 49 +++++++++++++++++++++
 app/pages/Profile.tsx                       | 14 +++++-
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Profile/Profile.Activity.tsx

diff --git a/app/components/Profile/Profile.Activity.tsx b/app/components/Profile/Profile.Activity.tsx
new file mode 100644
index 0000000..c1fb60b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/pages/Profile.tsx b/app/pages/Profile.tsx
index 2866ee7..a14f52e 100644
--- a/app/pages/Profile.tsx
+++ b/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>
     </>
   );