From 9f339228fa3b497416eb5c1a949ef445f8bab3d3 Mon Sep 17 00:00:00 2001 From: Ekta Yadav Date: Thu, 4 Apr 2024 18:09:34 +0530 Subject: [PATCH] domain carousel --- packages/nulp_elite/src/App.js | 6 + .../src/components/domainCarousel.js | 118 ++++++++++++++++++ packages/nulp_elite/src/components/header.js | 2 +- .../nulp_elite/src/pages/profile/Profile.js | 1 + .../src/pages/profile/learningHistory.js | 91 ++++++++++++++ .../src/pages/search/ContentList.js | 1 + .../nulp_elite/src/pages/search/DomainList.js | 12 +- 7 files changed, 228 insertions(+), 3 deletions(-) create mode 100644 packages/nulp_elite/src/components/domainCarousel.js create mode 100644 packages/nulp_elite/src/pages/profile/learningHistory.js diff --git a/packages/nulp_elite/src/App.js b/packages/nulp_elite/src/App.js index 1224b119..71a74810 100644 --- a/packages/nulp_elite/src/App.js +++ b/packages/nulp_elite/src/App.js @@ -39,6 +39,7 @@ import DomainList from "pages/search/DomainList"; import Registrationnew from "pages/registration/Registration"; import Registrationold from "pages/registration/Registrationold"; import ContentList from "pages/search/ContentList"; +import LearningHistory from "pages/profile/learningHistory"; function App() { // const [t] = useTranslation(); @@ -79,6 +80,11 @@ function App() { path: "profile/certificate", component: Certificate, }, + { + moduleName: "nulp_elite", + path: "profile/learningHistory", + component: LearningHistory, + }, { moduleName: "nulp_elite", path: "/help", diff --git a/packages/nulp_elite/src/components/domainCarousel.js b/packages/nulp_elite/src/components/domainCarousel.js new file mode 100644 index 00000000..f40fd82e --- /dev/null +++ b/packages/nulp_elite/src/components/domainCarousel.js @@ -0,0 +1,118 @@ +import * as React from 'react'; +import AspectRatio from '@mui/joy/AspectRatio'; +import Box from '@mui/joy/Box'; +import Typography from '@mui/joy/Typography'; +import Card from '@mui/joy/Card'; +import Button from '@mui/joy/Button'; +import { NavigateBefore, NavigateNext } from '@mui/icons-material'; +import Carousel from 'react-multi-carousel'; +import 'react-multi-carousel/lib/styles.css'; + +export default function DomainCarousel({ domain }) { + const containerRef = React.useRef(null); + const [activeIndex, setActiveIndex] = React.useState(0); + + const handleScroll = (scrollOffset) => { + if (containerRef.current) { + containerRef.current.scrollLeft += scrollOffset; + } + }; + + const handlePrev = () => { + setActiveIndex((prevIndex) => Math.max(prevIndex - 1, 0)); + }; + + const handleNext = () => { + setActiveIndex((prevIndex) => Math.min(prevIndex + 1, domain.length - 1)); + }; + + const handleDotClick = (index) => { + setActiveIndex(index); + }; + + return ( + + + *': { + scrollSnapAlign: 'center', + }, + '::-webkit-scrollbar': { display: 'none' }, + }} + > + + {domain.map((item, index) => ( + + + {item.name} + + + {item.name} + + + ))} + + + + + {domain.map((_, index) => ( + handleDotClick(index)} + /> + ))} + + + + + ); +} diff --git a/packages/nulp_elite/src/components/header.js b/packages/nulp_elite/src/components/header.js index 1a584be0..6cbcae8c 100644 --- a/packages/nulp_elite/src/components/header.js +++ b/packages/nulp_elite/src/components/header.js @@ -27,7 +27,7 @@ import{changeLanguage} from "i18next"; const pages = ['Content', 'Connections', 'Profile']; -const settings = ['Profile', 'Account', 'Logout']; +const settings = ['Profile', 'Help', 'Logout']; function Header( ) { diff --git a/packages/nulp_elite/src/pages/profile/Profile.js b/packages/nulp_elite/src/pages/profile/Profile.js index e5eb4440..356469fc 100644 --- a/packages/nulp_elite/src/pages/profile/Profile.js +++ b/packages/nulp_elite/src/pages/profile/Profile.js @@ -38,6 +38,7 @@ const Profile = () => { + {t("ABOUT_ME")} diff --git a/packages/nulp_elite/src/pages/profile/learningHistory.js b/packages/nulp_elite/src/pages/profile/learningHistory.js new file mode 100644 index 00000000..845410e5 --- /dev/null +++ b/packages/nulp_elite/src/pages/profile/learningHistory.js @@ -0,0 +1,91 @@ +// Profile.js + +import React, { useState, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import Footer from "components/Footer"; +import Header from "components/header"; +import Container from '@mui/material/Container'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import SimCardDownloadOutlinedIcon from '@mui/icons-material/SimCardDownloadOutlined'; +import Link from '@mui/material/Link'; +import Grid from '@mui/material/Grid'; +import data from "../../assets/certificates.json"; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; +import Breadcrumbs from "@mui/material/Breadcrumbs"; +import Card from '@mui/material/Card'; + + +const LearningHistory = () => { + const { t } = useTranslation(); + + return ( +
+
+ + + + + + + {t("MY_PROFILE")} + + + {t("CERTIFICATES")} + + + + + {t("CERTIFICATES")} + + + + + {data.result && data.result.response.content && data.result.response.content.map((faqIndex) => ( + + + + {faqIndex._source.data.badge.name} + + + {t("CERTIFICATE_GIVEN_BY")}: {faqIndex._source.data.badge.issuer.name} + + + {t("CERTIFICATE_ISSUE_DATE")}: -{faqIndex._source.data.issuedOn} + + + + {t("CERTIFICATES")} + + + + +))} + + + + + + + + +
+ +
+ + ); +}; + +export default LearningHistory; diff --git a/packages/nulp_elite/src/pages/search/ContentList.js b/packages/nulp_elite/src/pages/search/ContentList.js index 683e1242..02567e5a 100644 --- a/packages/nulp_elite/src/pages/search/ContentList.js +++ b/packages/nulp_elite/src/pages/search/ContentList.js @@ -102,6 +102,7 @@ const ContentList = (props) => { + diff --git a/packages/nulp_elite/src/pages/search/DomainList.js b/packages/nulp_elite/src/pages/search/DomainList.js index 5f98bf9f..3cb6587c 100644 --- a/packages/nulp_elite/src/pages/search/DomainList.js +++ b/packages/nulp_elite/src/pages/search/DomainList.js @@ -18,6 +18,7 @@ import { frameworkService } from "@shiksha/common-lib"; import { generatePath, useNavigate ,useLocation} from "react-router-dom"; import Footer from "../../components/Footer"; import { contentService } from "@shiksha/common-lib"; +import DomainCarousel from "components/domainCarousel"; const Item = styled(Paper)(({ theme }) => ({ @@ -111,6 +112,7 @@ const DomainList = () => { console.log(term); navigate('/search/contentList', { state: { domain: term.code } }); } + console.log(frameworkHardCodedData.result.framework.categories[0].terms); return (
@@ -126,11 +128,15 @@ const DomainList = () => { Filter by popular domain + + {/* */} + - {data && data.framework && data.framework.categories && data.framework.categories.map((faqIndex) => ( - // {frameworkHardCodedData.result.framework.categories.map((faqIndex) => ( + {/* {data && data.framework && data.framework.categories && data.framework.categories.map((faqIndex) => ( */} + {frameworkHardCodedData.result.framework.categories.map((faqIndex) => ( {faqIndex.terms.map(term => ( + loadContents(term)} style={{display:'flex', flexDirection:'row', alignItems:'center'}} key={faqIndex.id}> @@ -138,8 +144,10 @@ const DomainList = () => {
{term.name}
 + ))} + ))}