Merge pull request #64 from JimTheCat/CU-8696pcyge_Create-group-page_…

…Patryk-Kosiski

feature: Add group tab

frontend/src/Components/Navbar/Navbar.tsx

@@ -62,7 +62,7 @@ export const Navbar = () => {
               <MenuButton icon={<IconZoom/>} text={"Wyszukaj"} href={"/search"}/>
               <MenuButton icon={<IconPencil/>} text={"Napisz post"} href={"/createpost"}/>
               <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"/friends"}/>
-              <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"placeholder3"}/>
+              <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"/groups"}/>
               <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"} href={"placeholder4"}/>
               <MenuButton icon={<IconUserHeart/>} text={"Matching"} href={"placeholder5"}/>
               <MenuButton icon={<IconMail/>} text={"Wiadomości"} href={"placeholder6"}/>

frontend/src/Pages/Groups/Groups.tsx

@@ -0,0 +1,71 @@
+import {Button, Card, Center, Group, Image, SimpleGrid, Stack, Text, Title} from "@mantine/core";
+
+const groups = [
+  {
+    name: "Group 1",
+    description: "Description of group 1",
+    date: "2021-10-10",
+    members: 10,
+    logo: "https://via.placeholder.com/150",
+  },
+  {
+    name: "Group 2",
+    description: "Description of group 2",
+    date: "2021-10-11",
+    members: 15,
+    logo: "https://via.placeholder.com/150",
+  },
+  {
+    name: "Group 3",
+    description: "Description of group 3",
+    date: "2021-10-12",
+    members: 20,
+    logo: "https://via.placeholder.com/150",
+  },
+  {
+    name: "Group 4",
+    description: "Description of group 4",
+    date: "2021-10-13",
+    members: 25,
+    logo: "https://via.placeholder.com/150",
+  },
+  {
+    name: "Group 5",
+    description: "Description of group 5",
+    date: "2021-10-14",
+    members: 30,
+    logo: "https://via.placeholder.com/150",
+  },
+];
+
+export const Groups = () => {
+  return (
+    <Center>
+      <Card shadow="sm" padding="lg" mt={"md"} radius="md" w={"fit-content"} withBorder>
+        <Title mb={"md"} order={2}>
+          Groups
+        </Title>
+        <SimpleGrid cols={2} spacing={"md"}>
+          {groups.map((group, index) => (
+            <Card key={index} shadow="md" padding="md" mt={"md"} radius="md" withBorder>
+              <Group justify={"space-between"}>
+                <Group>
+                  <Image radius={"sm"} src={group.logo} alt={group.name}/>
+                  <Stack gap={0}>
+                    <Title order={3}>{group.name}</Title>
+                    <Text>{group.description}</Text>
+                    <Text>Date of creation: {group.date}</Text>
+                    <Text>Members: {group.members}</Text>
+                  </Stack>
+                </Group>
+                <Button color="blue" variant="light">
+                  Join
+                </Button>
+              </Group>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </Card>
+    </Center>
+  );
+}

frontend/src/Pages/Groups/index.tsx

@@ -0,0 +1 @@
+export * from './Groups';

frontend/src/Pages/Root/Root.tsx

@@ -8,6 +8,7 @@ import {Recovery} from "../Recovery";
 import {Profile} from "../Profile";
 import {Search} from "../Search";
 import {Post} from "../Post";
+import {Groups} from "../Groups";
 import {Friends} from "../Friends";
 import {Settings} from "../Settings";
 
@@ -22,6 +23,7 @@ export const Root = () => {
         <Route path="/search" element={<Search/>}/>
         <Route path="/profile/:userTag" element={<Profile/>}/>
         <Route path="/createpost" element={<Post/>}/>
+        <Route path="/groups" element={<Groups/>}/>
         <Route path="/friends" element={<Friends/>}/>
       </Route>
       <Route path="/settings" element={<Settings/>}/>