Friends

next.config.js

@@ -39,6 +39,14 @@ const nextConfig = {
   images: {
     domains: ["unsplash.com", "images.unsplash.com", "res.cloudinary.com"],
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

src/app/profile/friends/page.tsx

@@ -1,11 +1,66 @@
+import Tabs from "library/atoms/Tabs";
+import UserCard from "library/molecules/cards/UserCard";
+import CardContainer from "library/atoms/CardContainer";
+import Button from "library/atoms/Button";
+
 import { Metadata } from "next";
+import { getMembers } from "app/api/member/member";
 
 export const metadata: Metadata = {
   title: 'Přátelé a oblíbení',
-}
+};
+
+const ProfileFriends = async () => {
+  const members = await getMembers({}, {});
+
+  if (!members) return <div>Nebylo možné načíst data</div>;
+
+  const request = <div>
+    {members.map((member) => {
+      // @ts-ignore
+      const basic: ObjectConstructor = Object.values(member.xprofile.groups)[0].fields;
+
+      return <UserCard
+        cardType="friendWaiting"
+        name={member.name}
+        gender={Object.values(basic)[3].value.raw}
+        age={Object.values(basic)[1].value.rendered.slice(3, 5)}
+        location={Object.values(basic)[4].value.raw}
+        photo={member.avatar_urls?.full.slice(0, 5) === 'https' ? member.avatar_urls?.full : 'https:' + member.avatar_urls?.full}
+        userIsActive={false}
+        key={member.id} />
+    })}
+  </div>;
+
+  const favourite = <div>
+    <UserCard
+      cardType="friend"
+      name="Franta Nezval"
+      gender="muž"
+      age={24}
+      location="Praha"
+      photo="/assets/images/user-photo.png"
+      userIsActive={false} />
+  </div>;
 
-const ProfileFriends = () => {
-    return <h1>Profile: Friends & Favorites</h1>
+  return (
+    <>
+      <div className='flex justify-center items-center flex-col gap-4'>
+        <Tabs
+          request={request}
+          favourite={favourite} />
+      </div>
+      <div className="flex justify-center py-4">
+        <CardContainer variant='default' padding="smaller" className="w-[358px] h-[204px] bg-mustard-10 bg-[url('/assets/images/ellipse.svg')] bg-right-top bg-no-repeat">
+          <div className="flex justify-center flex-col gap-4">
+            <h4 className="text-2xl font-medium">Najdi si nové přátele</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+            <Button as="link" path="/" color="secondary" buttonText="Přejít na vyhledávání" />
+          </div>
+        </CardContainer>
+      </div>
+    </>
+  );
 }
 
 export default ProfileFriends;

src/library/atoms/Tabs.tsx

@@ -1,24 +1,29 @@
-import { useState } from "react";
+"use client";
+
+import { ReactNode, useState } from "react";
 import { Tab } from "@headlessui/react";
 import classNames from "helpers/classNames";
 
-const Tabs = () => {
+interface Props {
+  request?: React.ReactNode,
+  favourite?: React.ReactNode 
+}
+
+const Tabs = ({ request, favourite }: Props) => {
   //TODO: Budou se Tabs používat ještě na něco jiného? Zflexibilnit?
   let [categories] = useState({
     Přátelé: [
       {
         id: 1,
         title: "Čekající žádosti",
-        contents:
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate. Donec non semper quam. Sed vitae arcu in quam luctus elementum. Sed nec mag",
+        contents: request
       },
     ],
     Oblíbení: [
       {
-        id: 1,
+        id: 2,
         title: "Moji oblíbení",
-        contents:
-          "Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate. Donec non semper quam. Sed vitae arcu in quam luctus elementum. Sed nec mag",
+        contents: favourite
       },
     ],
   });
@@ -51,7 +56,7 @@ const Tabs = () => {
                   <li key={post.id} className="flex flex-col gap-3 relative rounded-md p-3">
                     <h3 className="text-gray-100">{post.title}</h3>
 
-                    <p className="mt-1">{post.contents}</p>
+                    <div className="mt-1">{post.contents}</div>
                   </li>
                 ))}
               </ul>

src/library/molecules/cards/UserCard.tsx

@@ -10,7 +10,7 @@ import Image from "next/image";
 
 type Props = {
   cardType: "default" | "friendWaiting" | "friend";
-  name: string;
+  name?: string;
   gender: string;
   age: number;
   location: string;