feature: Add CardProfileTop

Start adding basic profile structure including first card profile. Refs: CU-8696hrm29 Signed-off-by: Jimmy <[email protected]>
JimTheCat · Nov 13, 2024 · 6ea4eec · 6ea4eec
1 parent fc5782d
commit 6ea4eec
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/frontend/src/Components/Cards/ProfileFriends/ProfileFriends.tsx b/frontend/src/Components/Cards/ProfileFriends/ProfileFriends.tsx
@@ -0,0 +1,33 @@
+import {Card, Grid, Group, Image, Text, UnstyledButton} from "@mantine/core";
+import {DummyFriendsType} from "../../../Services/Constants/DummyUser.tsx";
+
+export const ProfileFriends = (props: { friends: DummyFriendsType }) => {
+
+  const handleButtonClick = (event) => {
+    event.preventDefault();
+
+    window.open(event.target.href, '_blank', 'noopener,noreferrer');
+  }
+
+  return (
+    <Card shadow="sm" px="lg" pt={"lg"} radius="md" w={400} withBorder>
+      <Group justify={"space-between"} mb={15}>
+        <Text size={"lg"}>Friends</Text>
+        <UnstyledButton component="a" href="https://www.google.com" onClick={handleButtonClick} c="dimmed">Wyświetl
+          wszystko</UnstyledButton>
+      </Group>
+
+      <Grid gutter={"xs"} align={"center"}>
+        {props.friends.friendsDetails!.map((friend, index) => {
+          return (
+            <Grid.Col span={4}>
+              <Image key={index} src={friend.profilePicture} alt={"Photo " + index} w={"auto"} h={100} radius={180}
+                     fit={"contain"}/>
+            </Grid.Col>
+          );
+        })}
+      </Grid>
+
+    </Card>
+  );
+}
diff --git a/frontend/src/Components/Cards/ProfileFriends/index.tsx b/frontend/src/Components/Cards/ProfileFriends/index.tsx
@@ -0,0 +1 @@
+export * from './ProfileFriends.tsx'
diff --git a/frontend/src/Pages/Profile/Profile.tsx b/frontend/src/Pages/Profile/Profile.tsx
@@ -5,6 +5,7 @@ import {Box, Group, Stack} from "@mantine/core";
 import {ProfileAboutMe} from "../../Components/Cards/ProfileAboutMe";
 import {ProfileMultimedia} from "../../Components/Cards/ProfileMultimedia";
 import {DummyMultimedia} from "../../Services/Constants/DummyMultimedia.tsx";
+import {ProfileFriends} from "../../Components/Cards/ProfileFriends";
 
 export const Profile = () => {
 
@@ -18,10 +19,12 @@ export const Profile = () => {
             <CardProfileTop userDetails={DummyUser}/>
             <ProfileAboutMe htmlContent={DummyUser.profileDetails ? DummyUser.profileDetails : ""}/>
 
+            {/*TODO: Implement post map*/}
             {/*Here should be post map*/}
           </Stack>
           <Stack>
             <ProfileMultimedia multimedia={DummyMultimedia}/>
+            <ProfileFriends friends={DummyUser.friends!}/>
           </Stack>
         </Group>
       </Box>

diff --git a/frontend/src/Services/Constants/DummyUser.tsx b/frontend/src/Services/Constants/DummyUser.tsx
@@ -16,7 +16,7 @@ type DummySimpleUserType = {
   profilePicture?: string | null
 }
 
-type DummyFriendsType = {
+export type DummyFriendsType = {
   totalFriends: number,
   friendsDetails: DummySimpleUserType[] | null
 }
@@ -25,10 +25,10 @@ const DummyUserFriends: DummyFriendsType = {
   totalFriends: 2,
   friendsDetails: [
     {
-      profilePicture: ""
+      profilePicture: "https://med.gov.bz/wp-content/uploads/2020/08/dummy-profile-pic-300x300.jpg"
     },
     {
-      profilePicture: ""
+      profilePicture: "https://med.gov.bz/wp-content/uploads/2020/08/dummy-profile-pic-300x300.jpg"
     }
   ]
 }