add empty states

app/components/CollectionLink/CollectionLink.tsx

@@ -49,11 +49,13 @@ export const CollectionLink = (props: any) => {
                 {props.title}
               </p>
             </div>
-            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
+            {props.description && (
-              {`${props.description.slice(0, 125)}${
+              <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-                props.description.length > 125 ? "..." : ""
+                {`${props.description.slice(0, 125)}${
-              }`}
+                  props.description.length > 125 ? "..." : ""
-            </p>
+                }`}
+              </p>
+            )}
           </div>
         </div>
       </div>

app/components/Profile/Profile.Activity.tsx

@@ -1,49 +1,98 @@
 "use client";
-import { Card } from "flowbite-react";
+import { Button, ButtonGroup, Card } from "flowbite-react";
-import Link from "next/link";
+// import Link from "next/link";
-import { numberDeclension } from "#/api/utils";
+// import { numberDeclension } from "#/api/utils";
+import { ProfileActivityCollections } from "./Profile.ActivityCollections";
+import { useEffect, useState } from "react";
+import { CollectionCourusel } from "../CollectionCourusel/CollectionCourusel";
+import { ProfileActivityFriends } from "./Profile.ActivityFriends";
 
 export function ProfileActivity(props: {
   profile_id: number;
   commentCount: number;
   videoCount: number;
   collectionCount: number;
+  collectionPreview: any;
   friendsCount: number;
+  friendsPreview: any;
 }) {
+  const [tab, setTab] = useState<
+    "collections" | "comments" | "friends" | "videos"
+  >("collections");
+
+  const [collections, setCollections] = useState<Record<number, any>>({});
+
+  function _setCollection(array: any[]) {
+    if (array && array.length == 0) {
+      return;
+    }
+    let _coll = array.filter((col) => {
+      if (typeof col == "number") {
+        return false;
+      }
+      return true;
+    });
+    _coll.map((col) => {
+      setCollections((prev) => {
+        return {
+          ...prev,
+          [col.id]: col,
+        };
+      });
+
+      if (
+        col.creator.collections_preview &&
+        col.creator.collections_preview.length > 0
+      ) {
+        _setCollection(col.creator.collections_preview || []);
+      }
+    });
+  }
+
+  useEffect(() => {
+    _setCollection(props.collectionPreview || []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.collectionPreview]);
+
   return (
-    <Card className="h-fit">
+    <Card className="overflow-hidden h-fit">
       <h1 className="text-2xl font-bold">Активность</h1>
-      <div className="flex items-center gap-4 text-lg">
+      <ButtonGroup>
-        <div>
+        <Button
-          <p>
+          color={tab == "collections" ? "blue" : "light"}
-            {props.commentCount}{" "}
+          onClick={() => setTab("collections")}
-            {numberDeclension(
+        >
-              props.commentCount,
+          Коллекции | {props.collectionCount}
-              "комментарий",
+        </Button>
-              "комментария",
+        <Button
-              "комментариев"
+          color={tab == "comments" ? "blue" : "light"}
-            )}
+          onClick={() => setTab("comments")}
-          </p>
+        >
-          <p className="mt-2">{props.videoCount} видео</p>
+          Комментарии | {props.commentCount}
-        </div>
+        </Button>
-        <div>
+        <Button
-          <Link href={`/profile/${props.profile_id}/collections`}>
+          color={tab == "friends" ? "blue" : "light"}
-            <p className="border-b-2 border-gray-300 border-solid dark:border-gray-400 hover:border-gray-500 dark:hover:border-gray-200">
+          onClick={() => setTab("friends")}
-              {props.collectionCount}{" "}
+        >
-              {numberDeclension(
+          Друзья | {props.friendsCount}
-                props.commentCount,
+        </Button>
-                "коллекция",
+        <Button
-                "коллекции",
+          color={tab == "videos" ? "blue" : "light"}
-                "коллекций"
+          onClick={() => setTab("videos")}
-              )}
+        >
-            </p>
+          Видео | {props.videoCount}
-          </Link>
+        </Button>
-          <p className="mt-2">
+      </ButtonGroup>
-            {props.friendsCount}{" "}
+
-            {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
+      {tab == "collections" && (
-          </p>
+        <ProfileActivityCollections
-        </div>
+          content={Object.values(collections) || []}
-      </div>
+          profile_id={props.profile_id}
+        />
+      )}
+      {tab == "comments" && <>comments</>}
+      {tab == "friends" && <ProfileActivityFriends content={props.friendsPreview || []} />}
+      {tab == "videos" && <>videos</>}
     </Card>
   );
 }

app/components/Profile/Profile.ActivityCollections.tsx

@@ -0,0 +1,66 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import Link from "next/link";
+
+export const ProfileActivityCollections = (props: {
+  content: any;
+  profile_id: number;
+}) => {
+  return (
+    <div className="max-w-full">
+      <Swiper
+        modules={[Navigation, Mousewheel, Scrollbar]}
+        spaceBetween={8}
+        slidesPerView={"auto"}
+        direction={"horizontal"}
+        mousewheel={{
+          enabled: true,
+          sensitivity: 4,
+        }}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
+        allowTouchMove={true}
+        style={
+          {
+            "--swiper-scrollbar-bottom": "0",
+          } as React.CSSProperties
+        }
+      >
+        {props.content &&
+          props.content.length > 0 &&
+          props.content.map((collection) => {
+            return (
+              <SwiperSlide
+                key={`col-prev-${collection.id}`}
+                style={{ width: "fit-content" }}
+              >
+                <Link href={`/collection/${collection.id}`}>
+                  <div className="w-[400px] xl:w-[500px] aspect-video">
+                    <CollectionLink {...collection} />
+                  </div>
+                </Link>
+              </SwiperSlide>
+            );
+          })}
+
+        {props.content && props.content.length > 0 ?
+          <SwiperSlide style={{ width: "fit-content" }}>
+            <Link href={`/profile/${props.profile_id}/collections`}>
+              <div className="w-[400px] xl:w-[500px] aspect-video flex flex-col items-center justify-center w-full gap-2 text-black transition-colors bg-gray-100 border hover:bg-gray-200 border-gray-50 hover:border-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-500 aspect-video group dark:bg-gray-600 dark:text-white">
+                <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+                <p>Все коллекции</p>
+              </div>
+            </Link>
+          </SwiperSlide>
+        : <p className="text-lg">У пользователя нет коллекций</p>}
+      </Swiper>
+    </div>
+  );
+};

app/components/Profile/Profile.ActivityFriends.tsx

@@ -0,0 +1,70 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/mousewheel";
+import "swiper/css/scrollbar";
+import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { CollectionLink } from "../CollectionLink/CollectionLink";
+import Link from "next/link";
+import { Avatar, Button } from "flowbite-react";
+
+export const ProfileActivityFriends = (props: { content: any }) => {
+  return (
+    <div className="max-w-full">
+      <Swiper
+        modules={[Navigation, Mousewheel, Scrollbar]}
+        spaceBetween={8}
+        slidesPerView={"auto"}
+        direction={"horizontal"}
+        mousewheel={{
+          enabled: true,
+          sensitivity: 4,
+        }}
+        scrollbar={{
+          enabled: true,
+          draggable: true,
+        }}
+        allowTouchMove={true}
+        style={
+          {
+            "--swiper-scrollbar-bottom": "0",
+          } as React.CSSProperties
+        }
+      >
+        {props.content &&
+          props.content.length > 0 &&
+          props.content.map((profile) => {
+            return (
+              <SwiperSlide
+                key={`friend-prev-${profile.id}`}
+                style={{ width: "fit-content" }}
+                className="px-2 py-4"
+              >
+                <Link href={`/profile/${profile.id}`}>
+                  <div className="flex items-center gap-2">
+                    <Avatar
+                      img={profile.avatar}
+                      size="md"
+                      rounded={true}
+                      bordered={true}
+                      color={profile.is_online ? "success" : "light"}
+                      className="flex-shrink-0"
+                    />
+                    <p className="text-lg">{profile.login}</p>
+                  </div>
+                </Link>
+              </SwiperSlide>
+            );
+          })}
+        {props.content && props.content.length > 0 ?
+          <SwiperSlide style={{ width: "fit-content" }} className="px-2 py-4">
+            <Button>
+              <p className="text-lg">Все друзья</p>
+              <span className="w-8 h-8 iconify mdi--arrow-right dark:fill-white"></span>
+            </Button>
+          </SwiperSlide>
+        : <p className="text-lg">У пользователя нет друзей</p>}
+      </Swiper>
+    </div>
+  );
+};

app/pages/Profile.tsx

@@ -131,7 +131,9 @@ export const ProfilePage = (props: any) => {
               commentCount={user.comment_count}
               videoCount={user.video_count}
               collectionCount={user.collection_count}
+              collectionPreview={user.collections_preview || []}
               friendsCount={user.friend_count}
+              friendsPreview={user.friends_preview || []}
             />
           )}
           {!user.is_stats_hidden && (