feat: collection activity preview

app/components/CollectionLink/CollectionLink.tsx

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

app/components/Profile/Profile.Activity.tsx

@@ -1,19 +1,91 @@
 "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";
 
 export function ProfileActivity(props: {
   profile_id: number;
   commentCount: number;
   videoCount: number;
   collectionCount: number;
+  collectionPreview: any;
   friendsCount: number;
 }) {
+  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>
+        <Button
+          color={tab == "collections" ? "blue" : "light"}
+          onClick={() => setTab("collections")}
+        >
+          Коллекции | {props.collectionCount}
+        </Button>
+        <Button
+          color={tab == "comments" ? "blue" : "light"}
+          onClick={() => setTab("comments")}
+        >
+          Комментарии
+        </Button>
+        <Button
+          color={tab == "friends" ? "blue" : "light"}
+          onClick={() => setTab("friends")}
+        >
+          Друзья
+        </Button>
+      </ButtonGroup>
+
+      {tab == "collections" && (
+        <ProfileActivityCollections
+          content={Object.values(collections) || []}
+          profile_id={props.profile_id}
+        />
+      )}
+      {tab == "comments" && <>comments</>}
+      {tab == "friends" && <>friends</>}
+
+      {/* <div className="flex items-center gap-4 text-lg">
         <div>
           <p>
             {props.commentCount}{" "}
@@ -43,7 +115,7 @@ export function ProfileActivity(props: {
             {numberDeclension(props.commentCount, "друзей", "друга", "друзей")}
           </p>
         </div>
-      </div>
+      </div> */}
     </Card>
   );
 }

app/components/Profile/Profile.ActivityCollections.tsx

@@ -0,0 +1,64 @@
+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) => {
+            console.log(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>
+            );
+          })}
+        <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>
+      </Swiper>
+    </div>
+  );
+};

app/pages/Profile.tsx

@@ -131,6 +131,7 @@ 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}
             />
           )}