From 77fdb3b6ef3cf9b0526a973816e49b87994fb057 Mon Sep 17 00:00:00 2001 From: ttpl-rt-099 Date: Thu, 1 Aug 2024 15:45:52 +0530 Subject: [PATCH] Issue #PS-1534 feat: Foundation Course detail view UI implementation --- src/components/CoursePlannerCards.tsx | 42 ++++++ src/pages/course-planner-detail.tsx | 10 ++ src/pages/topic-detail-view.tsx | 191 ++++++++++++++++++++++++++ src/utils/Interfaces.ts | 4 + 4 files changed, 247 insertions(+) create mode 100644 src/components/CoursePlannerCards.tsx create mode 100644 src/pages/topic-detail-view.tsx diff --git a/src/components/CoursePlannerCards.tsx b/src/components/CoursePlannerCards.tsx new file mode 100644 index 00000000..5ba0e6f0 --- /dev/null +++ b/src/components/CoursePlannerCards.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Box, Grid } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import { CoursePlannerCardsProps } from '@/utils/Interfaces'; + +const CoursePlannerCards: React.FC = ({ + title, + subtitle, +}) => { + const theme = useTheme(); + + return ( + + + + + + {title} + + + {subtitle} + + + + + + ); +}; + +export default CoursePlannerCards; diff --git a/src/pages/course-planner-detail.tsx b/src/pages/course-planner-detail.tsx index f38a5bbd..e94309fe 100644 --- a/src/pages/course-planner-detail.tsx +++ b/src/pages/course-planner-detail.tsx @@ -8,6 +8,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'; +import { useRouter } from 'next/router'; import { Accordion, AccordionDetails, @@ -23,6 +24,7 @@ import { buildStyles, CircularProgressbar } from 'react-circular-progressbar'; const CoursePlannerDetail = () => { const theme = useTheme(); + const router = useRouter(); const { t } = useTranslation(); // Initialize the panels' state, assuming you have a known set of panel IDs @@ -284,6 +286,10 @@ const CoursePlannerDetail = () => { fontSize: '16px', fontWeight: '400', color: theme.palette.warning['300'], + cursor: 'pointer', + }} + onClick={() => { + router.push(`/topic-detail-view`); }} > The Fundamental Theorem of Arithmetic @@ -326,6 +332,10 @@ const CoursePlannerDetail = () => { alignItems: 'center', gap: '4px', mt: 0.8, + cursor: 'pointer', + }} + onClick={() => { + router.push(`/topic-detail-view`); }} > diff --git a/src/pages/topic-detail-view.tsx b/src/pages/topic-detail-view.tsx new file mode 100644 index 00000000..67f9053b --- /dev/null +++ b/src/pages/topic-detail-view.tsx @@ -0,0 +1,191 @@ +import CoursePlannerCards from '@/components/CoursePlannerCards'; +import Header from '@/components/Header'; +import { logEvent } from '@/utils/googleAnalytics'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Grid, + Tab, + Tabs, + Typography, +} from '@mui/material'; +import { useTheme } from '@mui/material/styles'; +import { useTranslation } from 'next-i18next'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import React from 'react'; + +const TopicDetailView = () => { + const [value, setValue] = React.useState(1); + const theme = useTheme(); + const { t } = useTranslation(); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + const handleBackEvent = () => { + window.history.back(); + logEvent({ + action: 'back-button-clicked-attendance-overview', + category: 'Attendance Overview Page', + label: 'Back Button Clicked', + }); + }; + + return ( + + +
+ + + + + + + + Mathematics {/* will come from API */} + + + + + + + + + + + + + {value === 1 && ( + + + + + } + aria-controls="panel1-content" + id="panel1-header" + className="accordion-summary" + sx={{ + m: 0, + background: theme?.palette?.action?.selected, + px: '16px', + height: '10px !important', + '&.Mui-expanded': { + minHeight: '48px', + }, + }} + > + + {t('CENTER_SESSION.FACILITATORS')} + + + + + + + + + )} + {value === 2 && ( + + + + )} + + + ); +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ['common'])), + // Will be passed to the page component as props + }, + }; +} + +export default TopicDetailView; diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts index f7fe505d..3653496e 100644 --- a/src/utils/Interfaces.ts +++ b/src/utils/Interfaces.ts @@ -415,4 +415,8 @@ export interface FacilitatorDrawerProps { primary?: string; toggleDrawer: (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => void; drawerState: { bottom: boolean }; +} +export interface CoursePlannerCardsProps { + title: string; + subtitle: string; } \ No newline at end of file