Skip to content

Commit 7983d49

Browse files
leecalcoteleecalcote
authored
Merge pull request #565 from captain-Akshay/captain/learningpath
Learning path resuable Components
2 parents 7d32d1f + 42d9843 commit 7983d49

38 files changed

+1508
-0
lines changed

‎src/custom/BookmarkNotification/BookmarkNotification.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { CrossCircleIcon } from '../../icons';
3+
import { NotificationWrapper } from './style';
4+
5+
interface NotificationProps {
6+
showNotification: boolean;
7+
closeNotification: () => void;
8+
}
9+
10+
const BookmarkNotification: React.FC<NotificationProps> = ({
11+
showNotification,
12+
closeNotification
13+
}) => {
14+
return showNotification ? (
15+
<NotificationWrapper>
16+
<div className="notification-container">
17+
<p>
18+
We track your progress so you don't need to worry about the 'mesh' of remembering where
19+
you left.
20+
</p>
21+
<CrossCircleIcon className="notification-cross-icon" onClick={closeNotification} />
22+
</div>
23+
</NotificationWrapper>
24+
) : null;
25+
};
26+
27+
export default BookmarkNotification;

‎src/custom/BookmarkNotification/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import BookmarkNotification from './BookmarkNotification';
2+
3+
export { BookmarkNotification };

‎src/custom/BookmarkNotification/style.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { styled } from '@mui/material';
2+
import { YELLOW_SEA } from '../../theme';
3+
4+
export const NotificationWrapper = styled('div')({
5+
position: 'fixed',
6+
bottom: '1rem',
7+
left: '1.5rem',
8+
zIndex: 999,
9+
maxWidth: '70%',
10+
11+
'.notification-container': {
12+
display: 'flex',
13+
alignItems: 'center',
14+
padding: '0.75rem 1rem',
15+
borderRadius: '5px',
16+
boxShadow: '0 2px 5px 0 rgb(0 0 0 / 26%)',
17+
background: YELLOW_SEA,
18+
animation: '$fadeIn .8s',
19+
20+
p: {
21+
margin: 0,
22+
marginRight: '15px'
23+
},
24+
25+
'.notification-cross-icon': {
26+
cursor: 'pointer',
27+
width: '1.5rem',
28+
height: '1.5rem'
29+
}
30+
},
31+
32+
'@keyframes fadeIn': {
33+
from: {
34+
opacity: 0,
35+
transform: 'translateX(-10%)'
36+
},
37+
to: {
38+
opacity: 1,
39+
transform: 'translateX(0)'
40+
}
41+
}
42+
});

‎src/custom/ChapterCard/ChapterCard.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
import { ChapterCardWrapper, ChapterContent, ChapterDescription, ChapterNumber } from './style';
3+
4+
interface Chapter {
5+
frontmatter: {
6+
chapterTitle?: string;
7+
courseTitle: string;
8+
description: string;
9+
};
10+
}
11+
12+
interface Props {
13+
chapterNum: number;
14+
chapter: Chapter;
15+
}
16+
17+
const ChapterCard: React.FC<Props> = ({ chapterNum, chapter }) => (
18+
<ChapterCardWrapper>
19+
<ChapterContent>
20+
<ChapterNumber>{chapterNum}</ChapterNumber>
21+
<ChapterDescription>
22+
<h3>
23+
{chapter.frontmatter.chapterTitle
24+
? chapter.frontmatter.chapterTitle
25+
: chapter.frontmatter.courseTitle}
26+
</h3>
27+
<p>{chapter.frontmatter.description}</p>
28+
</ChapterDescription>
29+
</ChapterContent>
30+
</ChapterCardWrapper>
31+
);
32+
33+
export default ChapterCard;

‎src/custom/ChapterCard/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ChapterCard from './ChapterCard';
2+
3+
export { ChapterCard };

‎src/custom/ChapterCard/style.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { styled } from '@mui/material';
2+
import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
3+
4+
// Styled component for ChapterCardWrapper
5+
export const ChapterCardWrapper = styled('div')(({ theme }) => ({
6+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
7+
padding: '1rem 1.25rem',
8+
width: '64rem',
9+
backgroundColor: theme.palette.mode === 'light' ? ALABASTER_WHITE : MIDNIGHT_BLACK,
10+
display: 'flex',
11+
border: `1px solid ${
12+
theme.palette.mode === 'light' ? 'rgb(0 0 0 / 0.01)' : 'rgb(255 255 255 / 0.03)'
13+
}`,
14+
justifyContent: 'space-between',
15+
'&:hover': {
16+
border: `1px solid ${KEPPEL}`,
17+
transition:
18+
'background 150ms ease-out 0s, border 150ms ease-out 0s, transform 150ms ease-out 0s',
19+
transform: 'translate3d(0px, -3px, 0px)',
20+
boxShadow: 'rgba(0, 0, 0, 0.08) 0px 3px 10px 0px'
21+
}
22+
}));
23+
24+
// Functional component for ChapterContent
25+
export const ChapterContent = styled('div')({
26+
display: 'inline-flex'
27+
});
28+
29+
// Functional component for ChapterNumber
30+
export const ChapterNumber = styled('div')(({ theme }) => ({
31+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
32+
fontSize: '2rem',
33+
margin: '0 2rem 0 1rem',
34+
color: theme.palette.mode === 'light' ? 'rgb(0 0 0 / 0.6)' : 'rgb(255 255 255 / 0.6)',
35+
alignSelf: 'center'
36+
}));
37+
export const ChapterDescription = styled('div')({
38+
h3: {
39+
margin: '0.25rem 0'
40+
},
41+
p: {
42+
margin: '0.35rem 0',
43+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
44+
color: 'inherit'
45+
},
46+
'@media screen and (max-width: 650px)': {
47+
p: {
48+
whiteSpace: 'nowrap',
49+
overflow: 'hidden',
50+
textOverflow: 'ellipsis',
51+
width: '75vw'
52+
}
53+
},
54+
'@media screen and (max-width: 650px) and (min-width: 300px)': {
55+
p: {
56+
width: '68vw'
57+
}
58+
}
59+
});

‎src/custom/LearningCard/LearningCard.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import {
3+
Card2,
4+
CardActive,
5+
CardDesc,
6+
CardHead,
7+
CardImage,
8+
CardLink,
9+
CardParent,
10+
CardSubdata,
11+
CardWrapper
12+
} from './style';
13+
14+
interface Tutorial {
15+
frontmatter: {
16+
disabled: string;
17+
themeColor: string;
18+
title: string;
19+
courseTitle: string;
20+
description: string;
21+
status?: boolean;
22+
cardImage: {
23+
src: string;
24+
};
25+
};
26+
}
27+
28+
interface Props {
29+
tutorial: Tutorial;
30+
path: string;
31+
courseCount: number;
32+
}
33+
34+
const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
35+
return (
36+
<CardWrapper>
37+
{tutorial.frontmatter.disabled === 'yes' ? (
38+
<Card2>
39+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
40+
<div>
41+
<CardHead>
42+
<h3>
43+
{tutorial.frontmatter.title
44+
? tutorial.frontmatter.title
45+
: tutorial.frontmatter.courseTitle}
46+
</h3>
47+
<div style={{ whiteSpace: 'nowrap' }}>
48+
<span>Coming Soon</span>
49+
</div>
50+
</CardHead>
51+
<CardDesc>
52+
<p className="summary">{tutorial.frontmatter.description}</p>
53+
</CardDesc>
54+
<CardImage>
55+
<img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
56+
</CardImage>
57+
</div>
58+
</CardParent>
59+
</Card2>
60+
) : (
61+
<CardLink href={path}>
62+
<CardActive>
63+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
64+
<div>
65+
<CardHead>
66+
<h3>
67+
{tutorial.frontmatter.title
68+
? tutorial.frontmatter.title
69+
: tutorial.frontmatter.courseTitle}
70+
</h3>
71+
{tutorial.frontmatter.status ? (
72+
<p>
73+
<span>New</span>
74+
</p>
75+
) : null}
76+
</CardHead>
77+
<CardDesc>
78+
<p className="summary">{tutorial.frontmatter.description}</p>
79+
</CardDesc>
80+
<CardSubdata className="card-subdata">
81+
<p>
82+
{courseCount} Course{courseCount === 1 ? '' : 's'}
83+
</p>
84+
</CardSubdata>
85+
<CardImage>
86+
<img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
87+
</CardImage>
88+
</div>
89+
</CardParent>
90+
</CardActive>
91+
</CardLink>
92+
)}
93+
</CardWrapper>
94+
);
95+
};
96+
97+
export default LearningCard;

‎src/custom/LearningCard/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import LearningCard from './LearningCard';
2+
3+
export { LearningCard };

‎src/custom/LearningCard/style.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { styled } from '@mui/material/styles';
2+
import { BLACK, ONYX_BLACK, SILVER_GRAY, WHITE } from '../../theme';
3+
4+
const CardWrapper = styled('div')({
5+
maxWidth: '28rem',
6+
minHeight: '16rem',
7+
margin: 'auto',
8+
borderRadius: '1rem'
9+
});
10+
11+
const CardActive = styled('div')(({ theme }) => ({
12+
cursor: 'pointer',
13+
transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
14+
'&:hover': {
15+
boxShadow: 'rgba(0, 179, 158, 0.9) 0px 0px 19px 6px'
16+
},
17+
backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
18+
}));
19+
20+
const CardLink = styled('a')({
21+
color: 'black',
22+
textDecoration: 'none'
23+
});
24+
25+
const CardParent = styled('div')(({ theme }) => ({
26+
borderTop: `5px solid ${theme.palette.primary.main}`,
27+
borderRadius: '0.25rem',
28+
minHeight: '16rem',
29+
display: 'flex',
30+
flexDirection: 'column',
31+
justifyContent: 'space-between',
32+
boxShadow: '0px 0.75rem 1rem 0.25rem rgba(0, 0, 0, 0.12)',
33+
position: 'relative',
34+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
35+
}));
36+
37+
const Card2 = styled('div')(({ theme }) => ({
38+
background: theme.palette.mode === 'light' ? SILVER_GRAY : ONYX_BLACK,
39+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
40+
}));
41+
42+
const CardHead = styled('div')(({ theme }) => ({
43+
display: 'flex',
44+
padding: '1rem',
45+
'& span': {
46+
border: `1px solid ${theme.palette.primary.dark}`,
47+
color: theme.palette.text.primary,
48+
borderRadius: '0.8rem',
49+
padding: '0.05rem 0.75rem',
50+
fontSize: '1rem',
51+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
52+
},
53+
'& h3': {
54+
color: theme.palette.text.primary,
55+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
56+
}
57+
}));
58+
59+
const CardDesc = styled('div')(({ theme }) => ({
60+
padding: '0 1rem',
61+
'.summary': {
62+
color: theme.palette.grey['700'],
63+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
64+
},
65+
p: {
66+
fontSize: '1rem'
67+
}
68+
}));
69+
70+
const CardSubdata = styled('div')(({ theme }) => ({
71+
padding: '0 1rem',
72+
position: 'absolute',
73+
bottom: '0rem',
74+
p: {
75+
fontSize: '1rem',
76+
color: theme.palette.text.primary,
77+
fontWeight: 600,
78+
transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
79+
}
80+
}));
81+
82+
const CardImage = styled('div')({
83+
textAlign: 'center',
84+
position: 'absolute',
85+
bottom: '0.1rem',
86+
right: '0.75rem',
87+
opacity: 0.2,
88+
img: {
89+
height: '8.5rem',
90+
width: '8.5rem'
91+
}
92+
});
93+
94+
export {
95+
Card2,
96+
CardActive,
97+
CardDesc,
98+
CardHead,
99+
CardImage,
100+
CardLink,
101+
CardParent,
102+
CardSubdata,
103+
CardWrapper
104+
};

0 commit comments

Comments
 (0)