feature: Create matching menu

- Add basic structure of matching,
- Add all roots,
- Add carousel dependency,
- Update Mantine dependency from 7.15.1 to 7.15.2
- Create submenu for matching
- Create basic component for matching

Refs: 8696pcz16
Signed-off-by: Jimmy <[email protected]>

frontend/package.json

@@ -11,13 +11,14 @@
     "test": "jest"
   },
   "dependencies": {
-    "@mantine/core": "^7.15.1",
-    "@mantine/dates": "^7.15.1",
-    "@mantine/form": "^7.15.1",
-    "@mantine/hooks": "^7.15.1",
-    "@mantine/modals": "^7.15.1",
-    "@mantine/notifications": "^7.15.1",
-    "@mantine/tiptap": "^7.15.1",
+    "@mantine/carousel": "^7.15.2",
+    "@mantine/core": "^7.15.2",
+    "@mantine/dates": "^7.15.2",
+    "@mantine/form": "^7.15.2",
+    "@mantine/hooks": "^7.15.2",
+    "@mantine/modals": "^7.15.2",
+    "@mantine/notifications": "^7.15.2",
+    "@mantine/tiptap": "^7.15.2",
     "@tabler/icons-react": "^3.23.0",
     "@tiptap/extension-highlight": "^2.10.0",
     "@tiptap/extension-link": "^2.10.0",
@@ -31,6 +32,7 @@
     "@tiptap/starter-kit": "^2.10.0",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
+    "embla-carousel-react": "^7.1.0",
     "i18next": "^23.16.1",
     "jwt-decode": "^4.0.0",
     "react": "^18.3.1",

frontend/src/Features/Matching/Matching.tsx

@@ -0,0 +1,28 @@
+import {AppShell, Stack} from "@mantine/core";
+import {Aside} from "./components/Aside";
+import React from "react";
+import {Main} from "./components/Main";
+
+type MatchingProps = {
+  component?: React.ReactNode;
+}
+
+export const Matching = (props: MatchingProps) => {
+  return (
+    <AppShell
+      aside={{
+        breakpoint: 0,
+        width: 300
+      }}
+    >
+      <AppShell.Aside withBorder={false}>
+        <Aside/>
+      </AppShell.Aside>
+      <AppShell.Main p={0}>
+        <Stack mih={"inherit"} p={'lg'} align={'center'} justify={'center'} gap={0}>
+          {props.component ? props.component : <Main/>}
+        </Stack>
+      </AppShell.Main>
+    </AppShell>
+  );
+}

frontend/src/Features/Matching/components/Aside/Aside.tsx

@@ -0,0 +1,23 @@
+import {AppShell, Card, ScrollArea, Title} from "@mantine/core";
+import {MenuButton} from "../../../shared/components/MenuButton";
+import {IconFilterHeart, IconHeartHandshake, IconNotes, IconSettingsHeart, IconUserHeart} from "@tabler/icons-react";
+
+export const Aside = () => {
+  const iconStroke = 1.5;
+  const base = '/matching';
+
+  return (
+    <Card radius={'md'} mt={"lg"} p={"sm"} w={'90%'} withBorder>
+      <Title order={2} mb={'xs'}>
+        Matching
+      </Title>
+      <AppShell.Section component={ScrollArea}>
+        <MenuButton icon={<IconHeartHandshake stroke={iconStroke}/>} text={'Meowknij'} href={base}/>
+        <MenuButton icon={<IconUserHeart stroke={iconStroke}/>} text={'Profil'} href={base + '/profile'}/>
+        <MenuButton icon={<IconFilterHeart stroke={iconStroke}/>} text={'Filtry'} href={base + '/filters'}/>
+        <MenuButton icon={<IconNotes stroke={iconStroke}/>} text={'Moje testy'} href={base + '/tests'}/>
+        <MenuButton icon={<IconSettingsHeart stroke={iconStroke}/>} text={'Ustawienia'} href={base + '/settings'}/>
+      </AppShell.Section>
+    </Card>
+  );
+}

frontend/src/Features/Matching/components/Aside/index.tsx

@@ -0,0 +1 @@
+export {Aside} from './Aside';

frontend/src/Features/Matching/components/Filters/MatchFilters.tsx

@@ -0,0 +1,6 @@
+export const MatchFilters = () => {
+  return (
+    <>
+    </>
+  );
+}

frontend/src/Features/Matching/components/Filters/index.tsx

@@ -0,0 +1 @@
+export {MatchFilters} from './MatchFilters.tsx';