Implement categories route

src/constants/translations/en/my-resources-page.json

@@ -3,7 +3,8 @@
     "lessons": "Lessons",
     "quizzes": "Quizzes",
     "questions": "Questions",
-    "attachments": "Attachments"
+    "attachments": "Attachments",
+    "categories": "Categories"
   },
   "lessons": {
     "addBtn": "New lesson",

src/constants/translations/ua/my-resources-page.json

@@ -3,7 +3,8 @@
     "lessons": "Уроки",
     "tests": "Тести",
     "questions": "Запитання",
-    "attachments": "Вкладення"
+    "attachments": "Вкладення",
+    "categories": "Категорії"
   },
   "lessons": {
     "addBtn": "Новий урок",

src/containers/my-resources/categories-container/CategoriesContainer.tsx

@@ -0,0 +1,11 @@
+import Box from '@mui/material/Box'
+
+const CategoriesContainer = () => {
+  return (
+    <Box>
+      <h3>Categories Page</h3>
+    </Box>
+  )
+}
+
+export default CategoriesContainer

src/pages/my-resources/MyResources.constants.tsx

@@ -4,11 +4,13 @@ import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'
 import AttachFileIcon from '@mui/icons-material/AttachFile'
 import NoteAltOutlinedIcon from '@mui/icons-material/NoteAltOutlined'
 import QuizOutlinedIcon from '@mui/icons-material/QuizOutlined'
+import CategoryIcon from '@mui/icons-material/Category'
 
 import AttachmentsContainer from '~/containers/my-resources/attachments-container/AttachmentsContainer'
 import QuizzesContainer from '~/containers/my-quizzes/QuizzesContainer'
 import LessonsContainer from '~/containers/my-resources/lessons-container/LessonsContainer'
 import QuestionsContainer from '~/containers/my-resources/questions-container/QuestionsContainer'
+import CategoriesContainer from '~/containers/my-resources/categories-container/CategoriesContainer'
 
 interface TabsData {
   [key: string]: {
@@ -37,5 +39,10 @@ export const tabsData: TabsData = {
     title: 'myResourcesPage.tabs.attachments',
     content: <AttachmentsContainer />,
     icon: <AttachFileIcon />
+  },
+  categories: {
+    title: 'myResourcesPage.tabs.categories',
+    content: <CategoriesContainer />,
+    icon: <CategoryIcon />
   }
 }

src/pages/my-resources/MyResources.styles.ts

@@ -4,5 +4,24 @@ export const styles = {
   title: {
     typography: TypographyVariantEnum.H4,
     mb: '40px'
+  },
+  tabs: {
+    display: 'flex',
+    borderBottom: '1px solid',
+    borderColor: 'primary.100',
+    mb: '24px',
+    '& > button:last-child': {
+      borderLeft: '1px solid',
+      borderColor: 'primary.100'
+    }
+  },
+  titleBox: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px',
+    '& > svg': {
+      width: '16px',
+      height: '16px'
+    }
   }
 }