Created new quiz tabs with mocked data (#1130)

* created new quiz tabs with mocked data

* made improvements

* removed redundant import

src/components/tab-navigation/TabNavigation.style.ts

@@ -0,0 +1,17 @@
+export const styles = {
+  tabs: {
+    display: 'flex',
+    borderBottom: '1px solid',
+    borderColor: 'primary.100',
+    mb: '24px'
+  },
+  titleBox: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px',
+    '& > svg': {
+      width: '16px',
+      height: '16px'
+    }
+  }
+}

src/components/tab-navigation/TabNavigation.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import Tab from '~/components/tab/Tab'
+import Box from '@mui/material/Box'
+
+import { styles } from '~/components/tab-navigation/TabNavigation.style'
+
+interface TabsData {
+  [key: string]: {
+    title: string
+    content: ReactElement
+    icon: ReactElement
+  }
+}
+
+interface TabNavigationProps {
+  activeTab: string
+  tabsData: TabsData
+  handleClick: (tab: string) => void
+}
+
+const TabNavigation: React.FC<TabNavigationProps> = ({
+  activeTab,
+  tabsData,
+  handleClick
+}) => {
+  const { t } = useTranslation()
+
+  const tabs = Object.keys(tabsData).map((key) => (
+    <Tab
+      activeTab={activeTab === key}
+      key={key}
+      onClick={() => handleClick(key)}
+    >
+      <Box sx={styles.titleBox}>
+        {tabsData[key].icon}
+        {t(tabsData[key].title)}
+      </Box>
+    </Tab>
+  ))
+
+  return <Box sx={styles.tabs}>{tabs}</Box>
+}
+
+export default TabNavigation

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

@@ -35,7 +35,11 @@
     "updated": "Last updates",
     "emptyItems": "You have no quizzes yet",
     "confirmDeletionTitle":"Do you confirm quiz deletion?",
-    "successDeletion":"Quiz was deleted successfully"
+    "successDeletion":"Quiz was deleted successfully",
+    "defaultNewTitle":"Untitled",
+    "defaultNewDescription":"Description...",
+    "createNewQuestion":"Create new question",
+    "addQuestion":"Add question"
   },
   "questions": {
     "addBtn": "New question",

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

@@ -35,7 +35,11 @@
     "updated": "Останнє оновлення",
     "emptyItems": "У вас ще немає тестів",
     "confirmDeletionTitle":"Ви підтверджуєте видалення тесту?",
-    "successDeletion":"Тест було успішно видалено"
+    "successDeletion":"Тест було успішно видалено",
+    "defaultNewTitle":"Без назви",
+    "defaultNewDescription":"Опис...",
+    "createNewQuestion":"Створити нове питання",
+    "addQuestion":"Додати питання"
   },
   "questions": {
     "addBtn": "Нове запитання",

src/containers/my-quizzes/edit-quiz-container/EditQuizContainer.styles.ts

@@ -0,0 +1,63 @@
+import { TypographyVariantEnum, VisibilityEnum } from '~/types'
+
+export const styles = {
+  container: {
+    p: { sm: '0' }
+  },
+  root: {
+    display: 'flex',
+    gap: '24px',
+    flexDirection: 'column',
+    p: '0'
+  },
+  input: {
+    style: {
+      padding: 0,
+      margin: 0
+    }
+  },
+  titleInput: {
+    disableUnderline: true,
+    style: {
+      fontSize: '35px',
+      maxHeight: '35px',
+      fontWeight: 500,
+      marginTop: 0
+    }
+  },
+  descriptionInput: {
+    style: { fontSize: '16px', maxHeight: '16px', marginTop: 0 },
+    disableUnderline: true
+  },
+  titleLabel: (title: string) => ({
+    style: {
+      visibility: title ? VisibilityEnum.Hidden : VisibilityEnum.Visible
+    },
+    shrink: false,
+    sx: { typography: TypographyVariantEnum.H4, top: -23 }
+  }),
+  descriptionLabel: (description: string) => ({
+    style: {
+      visibility: description ? VisibilityEnum.Hidden : VisibilityEnum.Visible
+    },
+    sx: { typography: TypographyVariantEnum.Body1, top: -20 },
+    shrink: false
+  }),
+  divider: {
+    color: 'primary.300'
+  },
+  buttons: {
+    display: 'flex',
+    gap: { xs: '24px', sm: '30px' },
+    justifyContent: 'space-between',
+    alignSelf: { xs: 'center', sm: 'end' }
+  },
+  functionalButtons: {
+    display: 'flex',
+    gap: { xs: '24px', sm: '30px' },
+    '& button': {
+      gap: '12px',
+      width: '100%'
+    }
+  }
+}

src/containers/my-quizzes/edit-quiz-container/EditQuizContainer.tsx

@@ -0,0 +1,96 @@
+import { ChangeEvent, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import EditIcon from '@mui/icons-material/Edit'
+import AddIcon from '@mui/icons-material/Add'
+
+import AppButton from '~/components/app-button/AppButton'
+import AppTextField from '~/components/app-text-field/AppTextField'
+import PageWrapper from '~/components/page-wrapper/PageWrapper'
+
+import { myResourcesPath } from '~/pages/create-or-edit-lesson/CreateOrEditLesson.constants'
+import { styles } from '~/containers/my-quizzes/edit-quiz-container/EditQuizContainer.styles'
+import {
+  ButtonTypeEnum,
+  ButtonVariantEnum,
+  ComponentEnum,
+  SizeEnum,
+  TextFieldVariantEnum
+} from '~/types'
+
+const EditQuizContainer = () => {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState<string>('')
+  const [description, setDescription] = useState<string>('')
+
+  const handleTitleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setTitle(e.currentTarget.value)
+  }
+
+  const handleDescriptionChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setDescription(e.currentTarget.value)
+  }
+
+  return (
+    <PageWrapper sx={styles.container}>
+      <Box component={ComponentEnum.Form} sx={styles.root}>
+        <AppTextField
+          InputLabelProps={styles.titleLabel(title)}
+          InputProps={styles.titleInput}
+          fullWidth
+          inputProps={styles.input}
+          label={t('myResourcesPage.quizzes.defaultNewTitle')}
+          onChange={(e) => handleTitleChange(e)}
+          variant={TextFieldVariantEnum.Standard}
+        />
+        <AppTextField
+          InputLabelProps={styles.descriptionLabel(description)}
+          InputProps={styles.descriptionInput}
+          fullWidth
+          inputProps={styles.input}
+          label={t('myResourcesPage.quizzes.defaultNewDescription')}
+          onChange={(e) => handleDescriptionChange(e)}
+          variant={TextFieldVariantEnum.Standard}
+        />
+        <Divider sx={styles.divider} />
+        <Box sx={styles.functionalButtons}>
+          <AppButton
+            size={SizeEnum.ExtraLarge}
+            variant={ButtonVariantEnum.Tonal}
+          >
+            {t('myResourcesPage.quizzes.createNewQuestion')}
+            <EditIcon fontSize={SizeEnum.Small} />
+          </AppButton>
+          <AppButton
+            size={SizeEnum.ExtraLarge}
+            variant={ButtonVariantEnum.Tonal}
+          >
+            {t('myResourcesPage.quizzes.addQuestion')}
+            <AddIcon fontSize={SizeEnum.Small} />
+          </AppButton>
+        </Box>
+        <Box sx={styles.buttons}>
+          <AppButton
+            component={Link}
+            size={SizeEnum.ExtraLarge}
+            to={myResourcesPath}
+            variant={ButtonVariantEnum.Tonal}
+          >
+            {t('common.cancel')}
+          </AppButton>
+          <AppButton size={SizeEnum.ExtraLarge} type={ButtonTypeEnum.Submit}>
+            {t('common.save')}
+          </AppButton>
+        </Box>
+      </Box>
+    </PageWrapper>
+  )
+}
+
+export default EditQuizContainer

src/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/material'
+
+const QuizSettingsContainer = () => {
+  return <Box>Quiz settings</Box>
+}
+
+export default QuizSettingsContainer

src/containers/my-quizzes/view-quiz-container/ViewQuizContainer.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@mui/material'
+
+const ViewQuizContainer = () => {
+  return <Box>View quiz</Box>
+}
+
+export default ViewQuizContainer

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

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

src/pages/my-resources/MyResources.tsx

@@ -1,14 +1,12 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import Box from '@mui/material/Box'
-
 import PageWrapper from '~/components/page-wrapper/PageWrapper'
-import Tab from '~/components/tab/Tab'
 import Typography from '@mui/material/Typography'
 
 import { tabsData } from '~/pages/my-resources/MyResources.constants'
 import { styles } from '~/pages/my-resources/MyResources.styles'
+import TabNavigation from '~/components/tab-navigation/TabNavigation'
 
 const MyResources = () => {
   const [activeTab, setActiveTab] = useState<string>('lessons')
@@ -18,25 +16,16 @@ const MyResources = () => {
     setActiveTab(tab)
   }
 
-  const tabs = Object.keys(tabsData).map((key) => (
-    <Tab
-      activeTab={activeTab === key}
-      key={key}
-      onClick={() => handleClick(key)}
-    >
-      <Box sx={styles.titleBox}>
-        {tabsData[key].icon}
-        {t(tabsData[key].title)}
-      </Box>
-    </Tab>
-  ))
-
   const tabContent = activeTab && tabsData[activeTab].content
 
   return (
     <PageWrapper>
       <Typography sx={styles.title}>{t(tabsData[activeTab].title)}</Typography>
-      <Box sx={styles.tabs}>{tabs}</Box>
+      <TabNavigation
+        activeTab={activeTab}
+        handleClick={handleClick}
+        tabsData={tabsData}
+      />
       {tabContent}
     </PageWrapper>
   )

src/pages/new-quiz/NewQuiz.constants.tsx

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react'
+import EditIcon from '@mui/icons-material/Edit'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import SettingsIcon from '@mui/icons-material/Settings'
+
+import EditQuizContainer from '~/containers/my-quizzes/edit-quiz-container/EditQuizContainer'
+import ViewQuizContainer from '~/containers/my-quizzes/view-quiz-container/ViewQuizContainer'
+import QuizSettingsContainer from '~/containers/my-quizzes/quiz-settings-container/QuizSettingsContainer'
+
+interface TabsData {
+  [key: string]: {
+    title: string
+    content: ReactElement
+    icon: ReactElement
+  }
+}
+export const tabsData: TabsData = {
+  edit: {
+    title: 'Edit',
+    content: <EditQuizContainer />,
+    icon: <EditIcon />
+  },
+  quizzes: {
+    title: 'View',
+    content: <ViewQuizContainer />,
+    icon: <VisibilityIcon />
+  },
+  settings: {
+    title: 'Settings',
+    content: <QuizSettingsContainer />,
+    icon: <SettingsIcon />
+  }
+}

src/pages/new-quiz/NewQuiz.styles.ts

@@ -0,0 +1,5 @@
+export const styles = {
+  container: {
+    px: { sm: '70px' }
+  }
+}