feat: add user friends preview

app/components/Profile/Profile.Activity.tsx

@@ -5,6 +5,7 @@ import { Button, ButtonGroup, Card } from "flowbite-react";
 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;
@@ -13,6 +14,7 @@ export function ProfileActivity(props: {
   collectionCount: number;
   collectionPreview: any;
   friendsCount: number;
+  friendsPreview: any;
 }) {
   const [tab, setTab] = useState<
     "collections" | "comments" | "friends" | "videos"
@@ -89,7 +91,7 @@ export function ProfileActivity(props: {
         />
       )}
       {tab == "comments" && <>comments</>}
-      {tab == "friends" && <>friends</>}
+      {tab == "friends" && <ProfileActivityFriends content={props.friendsPreview || []} />}
       {tab == "videos" && <>videos</>}
     </Card>
   );

app/components/Profile/Profile.ActivityCollections.tsx

@@ -36,7 +36,6 @@ export const ProfileActivityCollections = (props: {
         {props.content &&
           props.content.length > 0 &&
           props.content.map((collection) => {
-            console.log(collection);
             return (
               <SwiperSlide
                 key={`col-prev-${collection.id}`}

app/components/Profile/Profile.ActivityFriends.tsx

@@ -0,0 +1,68 @@
+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>
+            );
+          })}
+        <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>
+      </Swiper>
+    </div>
+  );
+};

app/pages/Profile.tsx

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