Skip to content

Commit

Permalink
Merge pull request #60 from shreyas1434shinde/coursePlaner
Browse files Browse the repository at this point in the history 
Issue #PS-1534 feat: Foundation Course detail view UI implementation
  • Loading branch information
@itsvick
itsvick authored Jul 30, 2024
2 parents e2409f5 + 3a01f70 commit b348422
Show file tree
Hide file tree
Showing 3 changed files with 296 additions and 2 deletions.
4 changes: 3 additions & 1 deletion public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,8 @@
"COURSE_PLANNER": {
"COURSE_PLANNER": "Course Plan",
"FOUNDATION_COURSE": "Foundation Course",
"MAIN_COURSE": "Main Course"
"MAIN_COURSE": "Main Course",
"COLLAPSE_ALL":"Collapse All",
"RESOURCES":"Resources"
}
}
288 changes: 288 additions & 0 deletions src/pages/course-planner-detail.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,288 @@
import Header from '@/components/Header';
import { logEvent } from '@/utils/googleAnalytics';
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Typography,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { buildStyles, CircularProgressbar } from 'react-circular-progressbar';

const CoursePlannerDetail = () => {
const theme = useTheme<any>();
const { t } = useTranslation();

const handleBackEvent = () => {
window.history.back();
logEvent({
action: 'back-button-clicked-attendance-overview',
category: 'Attendance Overview Page',
label: 'Back Button Clicked',
});
};
return (
<>
<Header />
<Box
sx={{
display: 'flex',
justifyContent: 'left',
alignItems: 'center',
color: '#4D4639',
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={{ position: 'relative', display: 'inline-flex' }}>
<Box sx={{ width: '40px', height: '40px' }}>
<CircularProgressbar
value={10}
strokeWidth={10}
styles={buildStyles({
pathColor: '#06A816',
trailColor: '#E6E6E6',
strokeLinecap: 'round',
})}
/>
</Box>

<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
variant="caption"
component="div"
sx={{
fontSize: '11px',
color: theme.palette.warning['300'],
fontWeight: '500',
}}
>
10%
</Typography>
</Box>
</Box>

<Box
sx={{
fontSize: '16px',
color: theme.palette.warning['300'],
}}
>
Mathematics {/* will come form API */}
</Box>
</Box>
</Box>
</Box>
{/* <Box mt={3} px={'16px'}>
<Box>calender UI will came here </Box>
</Box> */}
<Box
sx={{
display: 'flex',
justifyContent: 'end',
pr: '16px',
alignItems: 'center',
}}
mt={2}
>
<Box
sx={{
fontSize: '12px',
fontWeight: '500',
color: theme.palette.warning['300'],
}}
>
{t('COURSE_PLANNER.COLLAPSE_ALL')}
Collapse All
</Box>
<ArrowDropUpIcon
sx={{
color: theme.palette.warning['300'],
}}
/>
</Box>
<Box mt={2}>
<Box
sx={{
borderRadius: '8px',
}}
>
<Accordion
//defaultExpanded
sx={{
boxShadow: 'none',
background: '#F1E7D9',
border: 'none',
}}
>
<AccordionSummary
expandIcon={
<ArrowDropUpIcon
sx={{
color: theme.palette.warning['300'],
}}
/>
}
aria-controls="panel1-content"
id="panel1-header"
className="accordion-summary"
sx={{
px: '16px',
m: 0,
'&.Mui-expanded': {
minHeight: '48px',
},
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
pr: '5px',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '5px',
}}
>
<RadioButtonUncheckedIcon sx={{ fontSize: '15px' }} />
<Typography
fontWeight="500"
fontSize="14px"
color={theme.palette.warning['300']}
>
Topic 1 - Real Numbers {/* will came from API */}
</Typography>
</Box>
<Typography fontWeight="600" fontSize="12px" color="#7C766F">
Jan, Feb {/* will came from API */}
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails sx={{ padding: '0' }}>
<Box
sx={{
borderBottom: `1px solid ${theme.palette.warning['A100']}`,
}}
>
<Box
sx={{
py: '10px',
px: '16px',
background: theme.palette.warning['A400'],
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '20px',
}}
>
<Box
sx={{
fontSize: '16px',
fontWeight: '400',
color: theme.palette.warning['300'],
}}
>
The Fundamental Theorem of Arithmetic{' '}
{/* will came from API */}
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '4px',
}}
>
<Box
sx={{
padding: '5px',
background: ' #C1D6FF',
fontSize: '12px',
fontWeight: '500',
color: '#4D4639',
borderRadius: '8px',
}}
>
JAN
</Box>
<CheckCircleOutlineIcon sx={{ fontSize: '18px' }} />
</Box>
</Box>
<Box
sx={{
color: theme.palette.secondary.main,
display: 'flex',
alignItems: 'center',
gap: '4px',
mt: 0.8,
}}
>
<Box sx={{ fontSize: '12px', fontWeight: '500' }}>
5 {t('COURSE_PLANNER.RESOURCES')}
</Box>
<ArrowForwardIcon sx={{ fontSize: '16px' }} />
</Box>
</Box>
</Box>
</AccordionDetails>
</Accordion>
</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 CoursePlannerDetail;
6 changes: 5 additions & 1 deletion src/pages/course-planner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@ import { useTranslation } from 'next-i18next';
import SearchIcon from '@mui/icons-material/Search';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { useRouter } from 'next/router';

const CoursePlanner = () => {
const [value, setValue] = React.useState(1);
const theme = useTheme<any>();
const { t } = useTranslation();

const router = useRouter();
const inputRef = React.useRef<HTMLInputElement>(null);

const handleScrollDown = () => {
Expand Down Expand Up @@ -161,6 +162,9 @@ const CoursePlanner = () => {
padding: '12px',
cursor: 'pointer',
}}
onClick={() => {
router.push(`/course-planner-detail`); // Check route
}}
>
<Box
sx={{
Expand Down

0 comments on commit b348422

Please sign in to comment.