Learning path resuable Components

src/custom/BookmarkNotification/BookmarkNotification.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CrossCircleIcon } from '../../icons';
+import { NotificationWrapper } from './style';
+
+interface NotificationProps {
+  showNotification: boolean;
+  closeNotification: () => void;
+}
+
+const BookmarkNotification: React.FC<NotificationProps> = ({
+  showNotification,
+  closeNotification
+}) => {
+  return showNotification ? (
+    <NotificationWrapper>
+      <div className="notification-container">
+        <p>
+          We track your progress so you don't need to worry about the 'mesh' of remembering where
+          you left.
+        </p>
+        <CrossCircleIcon className="notification-cross-icon" onClick={closeNotification} />
+      </div>
+    </NotificationWrapper>
+  ) : null;
+};
+
+export default BookmarkNotification;

src/custom/BookmarkNotification/index.tsx

@@ -0,0 +1,3 @@
+import BookmarkNotification from './BookmarkNotification';
+
+export { BookmarkNotification };

src/custom/BookmarkNotification/style.tsx

@@ -0,0 +1,42 @@
+import { styled } from '@mui/material';
+import { YELLOW_SEA } from '../../theme';
+
+export const NotificationWrapper = styled('div')({
+  position: 'fixed',
+  bottom: '1rem',
+  left: '1.5rem',
+  zIndex: 999,
+  maxWidth: '70%',
+
+  '.notification-container': {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0.75rem 1rem',
+    borderRadius: '5px',
+    boxShadow: '0 2px 5px 0 rgb(0 0 0 / 26%)',
+    background: YELLOW_SEA,
+    animation: '$fadeIn .8s',
+
+    p: {
+      margin: 0,
+      marginRight: '15px'
+    },
+
+    '.notification-cross-icon': {
+      cursor: 'pointer',
+      width: '1.5rem',
+      height: '1.5rem'
+    }
+  },
+
+  '@keyframes fadeIn': {
+    from: {
+      opacity: 0,
+      transform: 'translateX(-10%)'
+    },
+    to: {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  }
+});

src/custom/ChapterCard/ChapterCard.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ChapterCardWrapper, ChapterContent, ChapterDescription, ChapterNumber } from './style';
+
+interface Chapter {
+  frontmatter: {
+    chapterTitle?: string;
+    courseTitle: string;
+    description: string;
+  };
+}
+
+interface Props {
+  chapterNum: number;
+  chapter: Chapter;
+}
+
+const ChapterCard: React.FC<Props> = ({ chapterNum, chapter }) => (
+  <ChapterCardWrapper>
+    <ChapterContent>
+      <ChapterNumber>{chapterNum}</ChapterNumber>
+      <ChapterDescription>
+        <h3>
+          {chapter.frontmatter.chapterTitle
+            ? chapter.frontmatter.chapterTitle
+            : chapter.frontmatter.courseTitle}
+        </h3>
+        <p>{chapter.frontmatter.description}</p>
+      </ChapterDescription>
+    </ChapterContent>
+  </ChapterCardWrapper>
+);
+
+export default ChapterCard;

src/custom/ChapterCard/index.tsx

@@ -0,0 +1,3 @@
+import ChapterCard from './ChapterCard';
+
+export { ChapterCard };

src/custom/ChapterCard/style.tsx

@@ -0,0 +1,59 @@
+import { styled } from '@mui/material';
+import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
+
+// Styled component for ChapterCardWrapper
+export const ChapterCardWrapper = styled('div')(({ theme }) => ({
+  transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
+  padding: '1rem 1.25rem',
+  width: '64rem',
+  backgroundColor: theme.palette.mode === 'light' ? ALABASTER_WHITE : MIDNIGHT_BLACK,
+  display: 'flex',
+  border: `1px solid ${
+    theme.palette.mode === 'light' ? 'rgb(0 0 0 / 0.01)' : 'rgb(255 255 255 / 0.03)'
+  }`,
+  justifyContent: 'space-between',
+  '&:hover': {
+    border: `1px solid ${KEPPEL}`,
+    transition:
+      'background 150ms ease-out 0s, border 150ms ease-out 0s, transform 150ms ease-out 0s',
+    transform: 'translate3d(0px, -3px, 0px)',
+    boxShadow: 'rgba(0, 0, 0, 0.08) 0px 3px 10px 0px'
+  }
+}));
+
+// Functional component for ChapterContent
+export const ChapterContent = styled('div')({
+  display: 'inline-flex'
+});
+
+// Functional component for ChapterNumber
+export const ChapterNumber = styled('div')(({ theme }) => ({
+  transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
+  fontSize: '2rem',
+  margin: '0 2rem 0 1rem',
+  color: theme.palette.mode === 'light' ? 'rgb(0 0 0 / 0.6)' : 'rgb(255 255 255 / 0.6)',
+  alignSelf: 'center'
+}));
+export const ChapterDescription = styled('div')({
+  h3: {
+    margin: '0.25rem 0'
+  },
+  p: {
+    margin: '0.35rem 0',
+    transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
+    color: 'inherit'
+  },
+  '@media screen and (max-width: 650px)': {
+    p: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: '75vw'
+    }
+  },
+  '@media screen and (max-width: 650px) and (min-width: 300px)': {
+    p: {
+      width: '68vw'
+    }
+  }
+});

src/custom/LearningCard/LearningCard.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  Card2,
+  CardActive,
+  CardDesc,
+  CardHead,
+  CardImage,
+  CardLink,
+  CardParent,
+  CardSubdata,
+  CardWrapper
+} from './style';
+
+interface Tutorial {
+  frontmatter: {
+    disabled: string;
+    themeColor: string;
+    title: string;
+    courseTitle: string;
+    description: string;
+    status?: boolean;
+    cardImage: {
+      src: string;
+    };
+  };
+}
+
+interface Props {
+  tutorial: Tutorial;
+  path: string;
+  courseCount: number;
+}
+
+const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
+  return (
+    <CardWrapper>
+      {tutorial.frontmatter.disabled === 'yes' ? (
+        <Card2>
+          <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
+            <div>
+              <CardHead>
+                <h3>
+                  {tutorial.frontmatter.title
+                    ? tutorial.frontmatter.title
+                    : tutorial.frontmatter.courseTitle}
+                </h3>
+                <div style={{ whiteSpace: 'nowrap' }}>
+                  <span>Coming Soon</span>
+                </div>
+              </CardHead>
+              <CardDesc>
+                <p className="summary">{tutorial.frontmatter.description}</p>
+              </CardDesc>
+              <CardImage>
+                <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+              </CardImage>
+            </div>
+          </CardParent>
+        </Card2>
+      ) : (
+        <CardLink href={path}>
+          <CardActive>
+            <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
+              <div>
+                <CardHead>
+                  <h3>
+                    {tutorial.frontmatter.title
+                      ? tutorial.frontmatter.title
+                      : tutorial.frontmatter.courseTitle}
+                  </h3>
+                  {tutorial.frontmatter.status ? (
+                    <p>
+                      <span>New</span>
+                    </p>
+                  ) : null}
+                </CardHead>
+                <CardDesc>
+                  <p className="summary">{tutorial.frontmatter.description}</p>
+                </CardDesc>
+                <CardSubdata className="card-subdata">
+                  <p>
+                    {courseCount} Course{courseCount === 1 ? '' : 's'}
+                  </p>
+                </CardSubdata>
+                <CardImage>
+                  <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+                </CardImage>
+              </div>
+            </CardParent>
+          </CardActive>
+        </CardLink>
+      )}
+    </CardWrapper>
+  );
+};
+
+export default LearningCard;

src/custom/LearningCard/index.tsx

@@ -0,0 +1,3 @@
+import LearningCard from './LearningCard';
+
+export { LearningCard };

src/custom/LearningCard/style.tsx

@@ -0,0 +1,104 @@
+import { styled } from '@mui/material/styles';
+import { BLACK, ONYX_BLACK, SILVER_GRAY, WHITE } from '../../theme';
+
+const CardWrapper = styled('div')({
+  maxWidth: '28rem',
+  minHeight: '16rem',
+  margin: 'auto',
+  borderRadius: '1rem'
+});
+
+const CardActive = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
+  '&:hover': {
+    boxShadow: 'rgba(0, 179, 158, 0.9) 0px 0px 19px 6px'
+  },
+  backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
+}));
+
+const CardLink = styled('a')({
+  color: 'black',
+  textDecoration: 'none'
+});
+
+const CardParent = styled('div')(({ theme }) => ({
+  borderTop: `5px solid ${theme.palette.primary.main}`,
+  borderRadius: '0.25rem',
+  minHeight: '16rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  boxShadow: '0px 0.75rem 1rem 0.25rem rgba(0, 0, 0, 0.12)',
+  position: 'relative',
+  transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+}));
+
+const Card2 = styled('div')(({ theme }) => ({
+  background: theme.palette.mode === 'light' ? SILVER_GRAY : ONYX_BLACK,
+  transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+}));
+
+const CardHead = styled('div')(({ theme }) => ({
+  display: 'flex',
+  padding: '1rem',
+  '& span': {
+    border: `1px solid ${theme.palette.primary.dark}`,
+    color: theme.palette.text.primary,
+    borderRadius: '0.8rem',
+    padding: '0.05rem 0.75rem',
+    fontSize: '1rem',
+    transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+  },
+  '& h3': {
+    color: theme.palette.text.primary,
+    transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+  }
+}));
+
+const CardDesc = styled('div')(({ theme }) => ({
+  padding: '0 1rem',
+  '.summary': {
+    color: theme.palette.grey['700'],
+    transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+  },
+  p: {
+    fontSize: '1rem'
+  }
+}));
+
+const CardSubdata = styled('div')(({ theme }) => ({
+  padding: '0 1rem',
+  position: 'absolute',
+  bottom: '0rem',
+  p: {
+    fontSize: '1rem',
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+    transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)'
+  }
+}));
+
+const CardImage = styled('div')({
+  textAlign: 'center',
+  position: 'absolute',
+  bottom: '0.1rem',
+  right: '0.75rem',
+  opacity: 0.2,
+  img: {
+    height: '8.5rem',
+    width: '8.5rem'
+  }
+});
+
+export {
+  Card2,
+  CardActive,
+  CardDesc,
+  CardHead,
+  CardImage,
+  CardLink,
+  CardParent,
+  CardSubdata,
+  CardWrapper
+};