Merge pull request #68 from shreyas1434shinde/coursePlaner

Issue #PS-1534 feat: Foundation Course detail view UI implementation

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<CoursePlannerCardsProps> = ({
+ title,
+ subtitle,
+}) => {
+ const theme = useTheme<any>();
+
+ return (
+ <Box>
+ <Grid container spacing={2} sx={{ px: '16px !important' }}>
+ <Grid item xs={6} md={2} sx={{ mt: 2 }}>
+ <Box className="facilitator-bg">
+ <Box
+ sx={{
+ fontSize: '16px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ {title}
+ </Box>
+ <Box
+ sx={{
+ fontSize: '11px',
+ fontWeight: '500',
+ color: theme?.palette?.warning['A400'],
+ }}
+ >
+ {subtitle}
+ </Box>
+ </Box>
+ </Grid>
+ </Grid>
+ </Box>
+ );
+};
+
+export default CoursePlannerCards;

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<any>();
+ 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`);
  }}
  >
  <Box sx={{ fontSize: '12px', fontWeight: '500' }}>

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<any>();
+ 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 (
+ <Box>
+ <Box>
+ <Header />
+ </Box>
+ <Box sx={{ px: '16px' }}>
+ <Box
+ sx={{
+ display: 'flex',
+ justifyContent: 'left',
+ alignItems: 'center',
+ color: theme.palette.warning['A200'],
+ padding: '15px 16px 5px',
+ gap: '15px',
+ }}
+ width={'100%'}
+ >
+ <KeyboardBackspaceOutlinedIcon
+ onClick={handleBackEvent}
+ cursor={'pointer'}
+ sx={{ color: theme.palette.warning['A200'] }}
+ />
+ <Box>
+ <Box
+ sx={{
+ display: 'flex',
+ gap: '10px',
+ alignItems: 'center',
+ }}
+ >
+ <Box
+ sx={{
+ fontSize: '16px',
+ color: theme.palette.warning['300'],
+ }}
+ >
+ Mathematics {/* will come from API */}
+ </Box>
+ </Box>
+ </Box>
+ </Box>
+ </Box>
+ <Box sx={{ mt: 2 }}>
+ <Box sx={{ width: '100%' }}>
+ <Tabs
+ value={value}
+ onChange={handleChange}
+ textColor="inherit"
+ aria-label="secondary tabs example"
+ sx={{
+ fontSize: '14px',
+ borderBottom: `1px solid ${theme.palette.primary.contrastText}`,
+
+ '& .MuiTab-root': {
+ color: '#4D4639',
+ padding: '0 20px',
+ },
+ '& .Mui-selected': {
+ color: '#4D4639',
+ },
+ '& .MuiTabs-indicator': {
+ display: 'flex',
+ justifyContent: 'center',
+ backgroundColor: theme.palette.primary.main,
+ borderRadius: '100px',
+ height: '3px',
+ },
+ '& .MuiTabs-scroller': {
+ overflowX: 'unset !important',
+ },
+ }}
+ >
+ <Tab value={1} label={t('COMMON.LEARNERS')} />
+ <Tab value={2} label={t('COMMON.FACILITATORS')} />
+ </Tabs>
+ </Box>
+ {value === 1 && (
+ <Box>
+ <Box sx={{ mt: 2, mb: 1.5 }}>
+ <Accordion
+ sx={{
+ boxShadow: 'none !important',
+ border: 'none !important',
+ mt: 1.5,
+ background: theme?.palette?.action?.selected,
+ '&.MuiAccordion-root': {
+ marginTop: 0,
+ },
+ }}
+ >
+ <AccordionSummary
+ expandIcon={
+ <ArrowDropDownIcon
+ sx={{ color: theme?.palette?.warning['300'] }}
+ />
+ }
+ 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',
+ },
+ }}
+ >
+ <Typography
+ fontWeight="500"
+ fontSize="14px"
+ sx={{ color: theme?.palette?.warning['300'] }}
+ >
+ {t('CENTER_SESSION.FACILITATORS')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails
+ sx={{
+ padding: '0px',
+ background: theme?.palette?.warning['A400'],
+ }}
+ >
+ <CoursePlannerCards
+ title={t('CENTER_SESSION.TITLE')}
+ subtitle={'Video'}
+ />
+ </AccordionDetails>
+ </Accordion>
+ </Box>
+ </Box>
+ )}
+ {value === 2 && (
+ <Box>
+ <CoursePlannerCards
+ title={t('CENTER_SESSION.TITLE')}
+ subtitle={'Game'}
+ />
+ </Box>
+ )}
+ </Box>
+ </Box>
+ );
+};
+
+export async function getStaticProps({ locale }: any) {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['common'])),
+ // Will be passed to the page component as props
+ },
+ };
+}
+
+export default TopicDetailView;

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;
 }