Skip to content

2
2023-029
Commit 9f45a25f authored by janithGamage's avatar janithGamage
Browse files
Options

fix: update 

Desc : update project
parent 189489cd
Hide whitespace changes
Inline Side-by-side
Showing with 870 additions and 168 deletions
.vscode/settings.json
View file @ 9f45a25f
{
"cSpell.words": [
"Countup",
"Janith",
"SLIIT"
]
......
Project/Frontend/Web_App/src/_mock/arrays/_curriculums.ts
View file @ 9f45a25f
export const curriculums_mock_data = [
{
"curriculumCode": "01",
"curriculumLevel": "Base Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": [
{
"tutorialCode": "01",
"tutorialTitle": "Numbers and Counting in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"taskItems": [
{
"title": "Learn Number One",
"description": "Learn how to sign the number one in sign language.",
"howToDo": "- Extend your index finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_one.jpg",
"referenceVideo": "https://example.com/number_one_video.mp4"
},
{
"title": "Learn Number Two",
"description": "Learn how to sign the number two in sign language.",
"howToDo": "- Extend your index and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_two.jpg",
"referenceVideo": "https://example.com/number_two_video.mp4"
},
{
"title": "Learn Number Three",
"description": "Learn how to sign the number three in sign language.",
"howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_three.jpg",
"referenceVideo": "https://example.com/number_three_video.mp4"
},
{
"title": "Learn Number Four",
"description": "Learn how to sign the number four in sign language.",
"howToDo": "- Extend your thumb, index, middle, and ring fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_four.jpg",
"referenceVideo": "https://example.com/number_four_video.mp4"
},
{
"title": "Learn Number Five",
"description": "Learn how to sign the number five in sign language.",
"howToDo": "- Extend all your fingers straight up.\n- Keep your thumb resting on the side of your palm.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_five.jpg",
"referenceVideo": "https://example.com/number_five_video.mp4"
},
{
"title": "Learn Number Six",
"description": "Learn how to sign the number six in sign language.",
"howToDo": "- Extend your thumb and pinky finger straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_six.jpg",
"referenceVideo": "https://example.com/number_six_video.mp4"
},
{
"title": "Learn Number Seven",
"description": "Learn how to sign the number seven in sign language.",
"howToDo": "- Extend your index, middle, and ring fingers straight up.\n- Keep your thumb, pinky, and pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_seven.jpg",
"referenceVideo": "https://example.com/number_seven_video.mp4"
},
{
"title": "Learn Number Eight",
"description": "Learn how to sign the number eight in sign language.",
"howToDo": "- Extend all your fingers straight up.\n- Cross your index and middle fingers over your ring and pinky fingers.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_eight.jpg",
"referenceVideo": "https://example.com/number_eight_video.mp4"
},
{
"title": "Learn Number Nine",
"description": "Learn how to sign the number nine in sign language.",
"howToDo": "- Extend your thumb and all your fingers straight up.\n- Keep your pinky finger folded.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_nine.jpg",
"referenceVideo": "https://example.com/number_nine_video.mp4"
},
{
"title": "Learn Number Ten",
"description": "Learn how to sign the number ten in sign language.",
"howToDo": "- Extend your thumb, index, and middle fingers straight up.\n- Keep the rest of your fingers closed.\n- Hold your hand in front of your chest.",
"referenceImage": "https://example.com/number_ten.jpg",
"referenceVideo": "https://example.com/number_ten_video.mp4"
}
]
},
{
"tutorialCode": "02",
"tutorialTitle": "Learn the Basics of Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Introduce the concept of sign language and its importance.\nTeach basic greetings and expressions, such as hello, goodbye, thank you, and sorry.\nProvide visual demonstrations and practice exercises for learners to practice these basic signs."
},
{
"tutorialCode": "03",
"tutorialTitle": "Family Signs in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs."
},
{
"tutorialCode": "04",
"tutorialTitle": "Everyday Vocabulary in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs."
},
{
"tutorialCode": "05",
"tutorialTitle": "Basic Conversational Phrases in Sign Language",
"tutorialImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorialContent": "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases."
}
]
},
{
"curriculumCode": "02",
"curriculumLevel": "Medium Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": []
},
{
"curriculumCode": "03",
"curriculumLevel": "Advance Level",
"curriculumName": "Learn Sign Language",
"curriculumImage": "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
"tutorials": []
}
]
export interface Item {
id: string;
title: string;
description: string;
howToDo?: string | string[];
image?: string;
video?: string;
}
export interface Tutorial {
id: string;
title: string;
description: string;
image: string;
items: Item[];
}
export interface Curriculum {
id: string;
title: string;
description: string;
image: string;
tutorials: Tutorial[];
}
export interface CurriculumsMockData {
curriculums: Curriculum[];
}
export const curriculums_mock_data: CurriculumsMockData = {
curriculums: [
{
id: "1",
title: "Base Level - Learn Sign Language",
description: "Begin your journey to learn sign language with our Base Level Curriculum. This Curriculum is designed for beginners who want to acquire essential sign language skills. Explore the rich world of sign language as you learn basic vocabulary, grammar, and sentence structures. Discover the art of expressing yourself through gestures and facial expressions, opening doors to effective communication with the deaf and hard of hearing community. With a supportive learning environment, interactive lessons, and hands-on practice, our Base Level Curriculum provides a solid foundation for your sign language journey. Start building connections and breaking down barriers today!",
image: "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc",
tutorials: [
{
id: "1",
title: "Numbers and Counting in Sign Language",
description: "Learn how to express numbers and counting in sign language. This tutorial focuses on teaching you the signs for numbers one to ten. Mastering number signs will enhance your ability to communicate effectively in various contexts. Through interactive lessons and practice exercises, you will gain confidence in using sign language for numerical expressions.",
image: "https://drive.google.com/uc?export=view&id=1GeFzoy3xt8UnfCQE3IPVjPXoAg7GAWgf",
items: [
{
id: "1",
title: "Learn Number One",
description: "In this lesson, you will learn how to sign the number one. Understanding this basic sign is crucial for counting and expressing singular items or concepts in sign language. Practice the hand shape, movement, and facial expression associated with the sign to improve your fluency.",
howToDo: [
"- Extend your index finger straight up.",
"- Keep the rest of your fingers closed.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=17sHGfW9zip8xAwbRtUihzxkseKq-Qn7q",
video: ""
},
{
id: "2",
title: "Learn Number Two",
description: "In this lesson, you will learn how to sign the number two. Mastering this sign is essential for counting and expressing pairs or dual concepts in sign language. Pay attention to the hand shape, movement, and facial expression involved in signing the number two to enhance your signing skills.",
howToDo: [
"- Extend your index and middle fingers straight up.",
"- Keep the rest of your fingers closed.",
"- Hold your hand in front of your chest."],
image: "https://drive.google.com/uc?export=view&id=1Nm-we15Rrr04ovRC1sr-ZVMNHbnALRm2",
video: ""
},
{
id: "3",
title: "Learn Number Three",
description: "In this lesson, you will learn how to sign the number three in sign language. Mastering this sign is essential for expressing the quantity or position of three items. Pay attention to the hand shape, movement, and facial expression involved in signing the number three to enhance your signing skills.",
howToDo: [
"- Extend your index, middle, and ring fingers straight up.",
"- Keep the rest of your fingers closed.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1mKY8D1utbqm8flnNM7DZRKtuPQDXqFSm",
video: ""
},
{
id: "4",
title: "Learn Number Four",
description: "In this lesson, you will learn how to sign the number four in sign language. This sign is commonly used for counting or indicating the quantity or position of four items. Focus on the hand shape, movement, and expression to accurately convey the number four in sign language.",
howToDo: [
"- Extend your thumb, index, middle, and ring fingers straight up.",
"- Keep your pinky finger folded.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1VtbHehsxbOC04fVR6_Ca6HDv6csH17SJ",
video: "https://example.com/number_four_video.mp4"
},
{
id: "5",
title: "Learn Number Five",
description: "In this lesson, you will learn how to sign the number five in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of five. Practice the hand shape, movement, and facial expression to effectively communicate the number five in sign language.",
howToDo: [
"- Extend all your fingers straight up.",
"- Keep your thumb resting on the side of your palm.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1G6qx4dhHTKUPvNag0R3qlDJugNOgcTqM",
video: ""
},
{
id: "6",
title: "Learn Number Six",
description: "In this lesson, you will learn how to sign the number six in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of six. Pay attention to the hand shape, movement, and expression involved in signing the number six to enhance your signing proficiency.",
howToDo: [
"- Extend your thumb and pinky finger straight up.",
"- Keep the rest of your fingers closed.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1Q2TbcPTx8KuLp4v2mPL_7GHO0l52DZXw",
video: "https://example.com/number_six_video.mp4"
},
{
id: "7",
title: "Learn Number Seven",
description: "In this lesson, you will learn how to sign the number seven in sign language. Mastering this sign is essential for counting, expressing quantities, or representing the concept of seven. Focus on the hand shape, movement, and facial expression to accurately convey the number seven in sign language.",
howToDo: [
"- Extend your index, middle, and ring fingers straight up.",
"- Keep your thumb, pinky, and pinky finger folded.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1Jwt1TqXO1L7t3JFqQYzKL4S4GCuqULJ1",
video: "https://example.com/number_seven_video.mp4"
},
{
id: "8",
title: "Learn Number Eight",
description: "In this lesson, you will learn how to sign the number eight in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of eight. Practice the hand shape, movement, and expression to effectively communicate the number eight in sign language.",
howToDo: [
"- Extend all your fingers straight up.",
"- Cross your index and middle fingers over your ring and pinky fingers.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=1zSf4hmqIUCcfebgoD6DTWmJ3NxY36LJL",
video: "https://example.com/number_eight_video.mp4"
},
{
id: "9",
title: "Learn Number Nine",
description: "In this lesson, you will learn how to sign the number nine in sign language. Mastering this sign is crucial for counting, expressing quantities, or representing the concept of nine. Pay attention to the hand shape, movement, and expression involved in signing the number nine to enhance your signing proficiency.",
howToDo: [
"- Extend your thumb and all your fingers straight up.",
"- Keep your pinky finger folded.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=16WB1Ifhq_ozKOO-ehfIqVRB6oC3B5STw",
video: "https://example.com/number_nine_video.mp4"
},
{
id: "10",
title: "Learn Number Ten",
description: "In this lesson, you will learn how to sign the number ten in sign language. This sign is commonly used for counting, indicating quantities, or representing the concept of ten. Focus on the hand shape, movement, and facial expression to accurately convey the number ten in sign language.",
howToDo: [
"- Extend your thumb, index, and middle fingers straight up.",
"- Keep the rest of your fingers closed.",
"- Hold your hand in front of your chest."
],
image: "https://drive.google.com/uc?export=view&id=11tCYFYjdVrr5LIFGyzOrIUg8bTURATZh",
video: "https://example.com/number_ten_video.mp4"
}
]
},
{
id: "2",
title: "Learn the Basics of Sign Language",
description: "Introduce the concept of sign language and its importance.\nTeach basic greetings and expressions, such as hello, goodbye, thank you, and sorry.\nProvide visual demonstrations and practice exercises for learners to practice these basic signs.",
image: "https://drive.google.com/uc?export=view&id=1BeJ4OS7mWsO3IuaJaORotEFGpcRuhonq",
items: []
},
{
id: "3",
title: "Family Signs in Sign Language",
description: "Teach signs for family members, such as mother, father, sister, brother, etc.\nIntroduce signs for common family-related words, such as family, love, and home.\nProvide visual demonstrations and practice exercises for learners to practice these family signs.",
image: "https://drive.google.com/uc?export=view&id=1_b3-0HAAWu5Ze20IAAKWxUSUS-fac6Dg",
items: []
},
{
id: "4",
title: "Everyday Vocabulary in Sign Language",
description: "Teach signs for everyday objects and activities, such as eat, drink, sleep, book, pen, etc.\nIntroduce signs for common words used in daily life.\nProvide visual demonstrations and interactive exercises for learners to practice using these signs.",
image: "https://drive.google.com/uc?export=view&id=1QqmeBBiAojz7jaHUUdQGLyqUVR-mKSsy",
items: []
},
{
id: "5",
title: "Basic Conversational Phrases in Sign Language",
description: "Teach simple conversational phrases, such as \"What is your name?\" or \"How are you?\"\nIntroduce signs for common question words and phrases.\nProvide visual demonstrations and practice exercises for learners to practice these conversational phrases.",
image: "https://drive.google.com/uc?export=view&id=1McSxkqPb7ZnlsDKfZfTj6OTS5GvXXKFE",
items: []
}
]
},
{
id: "2",
title: "Medium Level - Enhancing Sign Language Skills",
description: "Take your sign language skills to the next level with our Medium Level Curriculum. Designed for learners with some basic knowledge of sign language, this Curriculum focuses on expanding your vocabulary, improving grammar usage, and honing your expressive abilities. Dive deeper into the intricacies of sign language communication, including idiomatic expressions and storytelling techniques. Engage in interactive exercises, role-playing scenarios, and conversations to strengthen your fluency. With challenging yet rewarding lessons, our Medium Level Curriculum empowers you to communicate more effectively and connect with the deaf community on a deeper level.",
image: "https://drive.google.com/uc?export=view&id=1b5C6VNO55k3Wj6DJ-vJiUFFEuQnXs5Jo",
tutorials: [],
},
{
id: "3",
title: "Advanced Level - Mastering Sign Language",
description: "Become a proficient sign language user with our Advanced Level Curriculum. Designed for experienced sign language learners, this comprehensive Curriculum delves into advanced topics, such as complex grammar structures, specialized vocabulary, and cultural nuances. Refine your receptive and expressive skills through immersive activities, real-life simulations, and in-depth discussions. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level Curriculum propels you towards mastery of sign language and equips you to engage in diverse contexts with confidence.",
image: "https://drive.google.com/uc?export=view&id=1k-CtiCkM3efhmTBet-JZt2izxVrAdBL3",
tutorials: [],
},
]
}
\ No newline at end of file
Project/Frontend/Web_App/src/hooks/useCountup.ts 0 → 100644
View file @ 9f45a25f
import { useEffect, useState } from 'react';
type ReturnType = {
days: string;
hours: string;
minutes: string;
seconds: string;
};
export default function useCountup(date: Date): ReturnType {
const [countup, setCountup] = useState({
days: '00',
hours: '00',
minutes: '00',
seconds: '00',
});
useEffect(() => {
const interval = setInterval(() => setNewTime(), 1000);
return () => clearInterval(interval);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const setNewTime = () => {
const startTime = date;
const endTime = new Date();
const elapsedMilliseconds = endTime.valueOf() - startTime.valueOf();
const getDays = Math.floor(elapsedMilliseconds / (1000 * 60 * 60 * 24));
const getHours = `0${Math.floor((elapsedMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}`.slice(-2);
const getMinutes = `0${Math.floor((elapsedMilliseconds % (1000 * 60 * 60)) / (1000 * 60))}`.slice(-2);
const getSeconds = `0${Math.floor((elapsedMilliseconds % (1000 * 60)) / 1000)}`.slice(-2);
setCountup({
days: getDays.toString() || '000',
hours: getHours || '000',
minutes: getMinutes || '000',
seconds: getSeconds || '000',
});
};
return {
days: countup.days,
hours: countup.hours,
minutes: countup.minutes,
seconds: countup.seconds,
};
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId].tsx 0 → 100644
View file @ 9f45a25f
import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
import { Card, CardContent, CardHeader, Collapse, Container, Grid, IconButton, Typography } from '@mui/material';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Curriculum, Tutorial, curriculums_mock_data } from 'src/_mock/arrays/_curriculums';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import CarouselCenterMode from 'src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode';
import { useSettingsContext } from '../../../../../components/settings';
import DashboardLayout from '../../../../../layouts/dashboard';
CurriculumViewPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumViewPage() {
const { themeStretch } = useSettingsContext();
const { query: { curriculumId }, } = useRouter();
const [tutorials, setTutorials] = useState<Tutorial[]>([])
const [curriculumDetails, setCurriculumDetails] = useState<Curriculum>()
const [expanded, setExpanded] = useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
useEffect(() => {
if (!curriculumId) return
const selectedCurriculum = curriculums_mock_data.curriculums.find(curriculum => curriculum.id === curriculumId);
if (selectedCurriculum) {
setCurriculumDetails(selectedCurriculum)
setTutorials(selectedCurriculum.tutorials!);
}
}, [curriculumId])
return (
<>
<Head>
<title> Curriculum View | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading={`Curriculum View - ${curriculumDetails ? curriculumDetails.title : "N/A"}`}
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum View', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<Card>
<CardHeader
sx={{ mb: 3 }}
title="Comprehensive Sign Language Foundations"
subheader="Master the essential skills of sign language communication in this comprehensive curriculum."
action={
<IconButton
aria-expanded={expanded}
aria-label="show more"
onClick={handleExpandClick}
>
<ExpandMoreIcon />
</IconButton>
}
/>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography variant="subtitle1" >
Embark on a transformative journey of sign language proficiency with our Comprehensive Sign Language Foundations curriculum. Designed to equip learners with fundamental signing
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<Grid md={12} item>
{tutorials && <CarouselCenterMode data={tutorials} curriculumId={curriculumId} />}
</Grid>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../../components/settings';
import DashboardLayout from '../../../../../../layouts/dashboard';
CurriculumViewPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumViewPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Curriculum View | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum View"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum View', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/tutorials/[tutorialId].tsx 0 → 100644
View file @ 9f45a25f
import { Alert, Box, Button, ButtonGroup, Card, CardActions, CardContent, CardHeader, Checkbox, Container, Grid, IconButton, List, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListItemText, Paper, Stack, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Curriculum, Item, Tutorial, curriculums_mock_data } from 'src/_mock/arrays/_curriculums';
import { ComingSoonIllustration } from 'src/assets/illustrations';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Editor from 'src/components/editor/Editor';
import Iconify from 'src/components/iconify/Iconify';
import Image from 'src/components/image/Image';
import Scrollbar from 'src/components/scrollbar/Scrollbar';
import { NAV } from 'src/config';
import useCountup from 'src/hooks/useCountup';
import { useSettingsContext } from '../../../../../../../components/settings';
import DashboardLayout from '../../../../../../../layouts/dashboard';
TutorialViewPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
const ICON_SIZE = {
width: '100%',
height: '100%',
};
const StyledListContainer = styled(Paper)(({ theme }) => ({
width: '100%',
border: `solid 1px ${theme.palette.divider}`,
}));
const getCurrentDateTime = () => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
return `${month}/${day}/${year} ${hours}:${minutes}`;
};
export interface itemProps extends Item {
startDateTime?: string
}
export default function TutorialViewPage() {
const { themeStretch } = useSettingsContext();
const { query: { curriculumId, tutorialId }, } = useRouter();
const [curriculumDetails, setCurriculumDetails] = useState<Curriculum>()
const [tutorialDetails, setTutorialDetails] = useState<Tutorial>()
const [items, setItems] = useState<itemProps[]>()
const [menuItems, setMenuItems] = useState<{ id: string, title: string, onItemClick: any, icon: string, handleCheck: any }[]>([])
const [itemContent, setItemContent] = useState<{
id: string,
title: string
description: string,
steps: string[],
referenceImage?: string
referenceVideo?: string
startDateTime?: string
}>()
const [reference, setReference] = useState<"image" | "video">("image")
const [checked, setChecked] = useState([0]);
const { days, hours, minutes, seconds } = useCountup(new Date(getCurrentDateTime()));
const [quillSimple, setQuillSimple] = useState('');
const handleItemClick = (itemId: string) => {
setItemContent(undefined)
// Find the item with the matching ID
let selectedItem = items?.find(item => item.id === itemId);
if (!selectedItem?.startDateTime) {
console.log("her", getCurrentDateTime());
// Update the items array with the startDateTime property
const updatedItems = items?.map((item) =>
item.id === itemId ? { ...item, startDateTime: getCurrentDateTime() } : item
);
// Update the state with the updated items array
setItems(updatedItems);
}
if (selectedItem) {
// Set the item content based on the selected item
console.log(selectedItem.startDateTime);
setItemContent({
id: selectedItem.id,
title: selectedItem.title,
description: selectedItem.description,
steps: Array.isArray(selectedItem.howToDo) ? selectedItem.howToDo : [selectedItem.howToDo || ''],
referenceImage: selectedItem.image || '',
referenceVideo: selectedItem.video || '',
startDateTime: selectedItem.startDateTime
});
}
}
const handleCheck = (value: number) => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
useEffect(() => {
if (!curriculumId) return;
if (!tutorialId) return;
// Set curriculum details based on curriculumId
const selectedCurriculum = curriculums_mock_data.curriculums.find(
(curriculum) => curriculum.id === curriculumId
);
setCurriculumDetails(selectedCurriculum);
// Set tutorial details based on tutorialId
const selectedTutorial = selectedCurriculum?.tutorials.find(
(tutorial) => tutorial.id === tutorialId
);
setTutorialDetails(selectedTutorial);
// Set items based on tutorialId
setItems(selectedTutorial?.items);
}, [curriculumId, tutorialId]);
useEffect(() => {
if (!items || items.length === 0) return;
// Set menu items based on item titles
const newMenuItems: { id: string, title: string, onItemClick: any, icon: string, handleCheck: any }[] = items.map((item) => ({
id: item.id,
title: item.title,
onItemClick: handleItemClick,
icon: 'ic:outline-book',
handleCheck: handleCheck
}));
setMenuItems(newMenuItems);
}, [items])
return (
<>
<Head>
<title> Tutorial View | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading={`Tutorial View - ${tutorialDetails ? tutorialDetails.title : "N/A"}`}
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorials', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorial View', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={3} item>
<Card sx={{ width: NAV.W_BASE, flexShrink: 0, overflow: 'unset', zIndex: 9 }}>
<Typography variant="h6" sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
<Iconify icon="eva:list-fill" width={24} sx={{ mr: 1 }} /> Tutorial Items
</Typography>
<StyledListContainer>
<List>
{menuItems.map((item: { id: string, title: string, onItemClick: any, icon: string, handleCheck: any }, index: number) => {
index = parseInt(item.id)
return (
<>
<ListItemButton key={index} role={undefined} dense onClick={() => { item.onItemClick(item.id) }}>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(index) !== -1}
tabIndex={-1}
disableRipple
onClick={handleCheck(index)}
/>
</ListItemIcon>
<ListItemText primary={item.title} />
<ListItemSecondaryAction>
<IconButton edge="end">
<Iconify icon={item.icon} width={24} />
</IconButton>
</ListItemSecondaryAction>
</ListItemButton>
</>
)
})}
</List>
</StyledListContainer>
</Card>
</Grid>
<Grid md={9} item>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
{itemContent ? <>
<Card>
<CardHeader
title={itemContent.title}
action={
<Stack
direction="row"
justifyContent="right"
divider={<Box sx={{ mx: { xs: 1, sm: 2.5 } }}>:</Box>}
sx={{ typography: 'h6', m: 2 }}
>
<TimeBlock label="Days" value={days} />
<TimeBlock label="Hours" value={hours} />
<TimeBlock label="Minutes" value={minutes} />
<TimeBlock label="Seconds" value={seconds} />
</Stack>
}
/>
<CardContent>
<Scrollbar>
<Grid container spacing={2}>
<Grid item md={4}>
<ButtonGroup aria-label="outlined button group">
<Button variant={reference == "image" ? "contained" : "outlined"} onClick={() => { setReference("image") }}>Refer Image</Button>
<Button variant={reference == "video" ? "contained" : "outlined"} onClick={() => { setReference("video") }}>Refer video</Button>
</ButtonGroup>
{!reference && <><Alert severity='info'>Select a Reference Type</Alert></>}
{reference == "image" && <>
<Image
disabledEffect
alt={"Reference Image"}
src={itemContent.referenceImage}
ratio={"3/4"}
sx={{ borderRadius: 1, mt: 3 }}
/>
</>}
{reference == "video" && <>
<Card>
<CardContent>
<Typography variant="h5" paragraph>
Coming Soon!
</Typography>
<Typography sx={{ color: 'text.secondary' }}>
We are currently working hard on this page!
</Typography>
<ComingSoonIllustration sx={{ my: 1, height: 200 }} />
</CardContent>
</Card>
</>}
</Grid>
<Grid item md={8}>
<Card>
<CardContent>
<Typography variant='body1'>{itemContent.description}</Typography>
{itemContent.steps.map((value) => {
return (
<>
<Typography variant='subtitle1' sx={{ mt: 2 }}>{value}</Typography>
</>
)
})}
</CardContent>
<CardActions sx={{ m: 3 }}>
<Button variant="contained" color='warning' fullWidth onClick={() => { setQuillSimple('') }}>
Skip
</Button>
<Button variant="contained" color='error' fullWidth onClick={() => { setQuillSimple('') }}>
Practice
</Button>
<Button variant="contained" fullWidth>
Complete
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Scrollbar>
</CardContent>
</Card>
</> : <><Alert severity='info'>Select a tutorial item</Alert></>}
</Grid>
<Grid md={12} item>
<Card>
<CardHeader title="Tutorial item 01 work space" />
<CardContent>
<Editor
simple
id="simple-editor"
value={quillSimple}
onChange={(value) => setQuillSimple(value)}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
</Container >
</>
);
}
type TimeBlockProps = {
label: string;
value: string;
};
function TimeBlock({ label, value }: TimeBlockProps) {
return (
<div>
<Box> {value} </Box>
<Box sx={{ color: 'text.secondary', typography: 'body1' }}>{label}</Box>
</div>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/[curriculumId]/tutorials/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../../../components/settings';
import DashboardLayout from '../../../../../../../layouts/dashboard';
TutorialListPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function TutorialListPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Tutorial List | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Tutorial List"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorials', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Tutorial List', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/curriculums/index.tsx 0 → 100644
View file @ 9f45a25f
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import { useSettingsContext } from '../../../../../components/settings';
import DashboardLayout from '../../../../../layouts/dashboard';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
CurriculumListPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumListPage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Curriculum List | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum List"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculums', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum List', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
</Grid>
</Container >
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/index.tsx
View file @ 9f45a25f
import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
import { Card, CardContent, CardHeader, Collapse, Container, Grid, IconButton, Typography } from '@mui/material';
import Head from 'next/head';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { curriculums_mock_data } from 'src/_mock/arrays/_curriculums';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
import CarouselAnimation from 'src/sections/@dashboard/learning-module/curriculum/CarouselAnimation';
......@@ -25,27 +26,13 @@ export default function CurriculumHomePage() {
title: string;
image: string;
description: string;
}[]>([
{
id: "1",
title: "Base Level - Learn Sign Language",
description: "Begin your journey to learn sign language with our Base Level course. This course is designed for beginners who want to acquire essential sign language skills. Explore the rich world of sign language as you learn basic vocabulary, grammar, and sentence structures. Discover the art of expressing yourself through gestures and facial expressions, opening doors to effective communication with the deaf and hard of hearing community. With a supportive learning environment, interactive lessons, and hands-on practice, our Base Level course provides a solid foundation for your sign language journey. Start building connections and breaking down barriers today!",
image: "https://drive.google.com/uc?export=view&id=1YACBlu7X-O7-DKv5DoW3AM9kgfT7Yhdc"
},
{
id: "2",
title: "Medium Level - Enhancing Sign Language Skills",
description: "Take your sign language skills to the next level with our Medium Level course. Designed for learners with some basic knowledge of sign language, this course focuses on expanding your vocabulary, improving grammar usage, and honing your expressive abilities. Dive deeper into the intricacies of sign language communication, including idiomatic expressions and storytelling techniques. Engage in interactive exercises, role-playing scenarios, and conversations to strengthen your fluency. With challenging yet rewarding lessons, our Medium Level course empowers you to communicate more effectively and connect with the deaf community on a deeper level.",
image: "https://drive.google.com/uc?export=view&id=1b5C6VNO55k3Wj6DJ-vJiUFFEuQnXs5Jo"
},
{
id: "3",
title: "Advanced Level - Mastering Sign Language",
description: "Become a proficient sign language user with our Advanced Level course. Designed for experienced sign language learners, this comprehensive course delves into advanced topics, such as complex grammar structures, specialized vocabulary, and cultural nuances. Refine your receptive and expressive skills through immersive activities, real-life simulations, and in-depth discussions. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level course propels you towards mastery of sign language and equips you to engage in diverse contexts with confidence.",
image: "https://drive.google.com/uc?export=view&id=1k-CtiCkM3efhmTBet-JZt2izxVrAdBL3"
}
])
}[]>([])
useEffect(() => {
setCurriculums(curriculums_mock_data.curriculums)
}, [])
return (
<>
......@@ -73,7 +60,8 @@ export default function CurriculumHomePage() {
<Grid md={12} item>
<Card>
<CardHeader
title="Learn Sign Language Courses"
sx={{ mb: 3 }}
title="Learn Sign Language Curriculums"
subheader="Building a Solid Foundation, Enhancing Skills, and Mastering Sign Language"
action={
<IconButton
......@@ -88,39 +76,39 @@ export default function CurriculumHomePage() {
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography variant="body1">
Explore the world of sign language with our comprehensive course offerings. We provide three levels of sign language courses designed to cater to learners of varying proficiency levels.
Explore the world of sign language with our comprehensive Curriculum offerings. We provide three levels of sign language Curriculums designed to cater to learners of varying proficiency levels.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
1. Base Level - Learn Sign Language:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Start your sign language journey with our Base Level course. Perfect for beginners, this course offers essential sign language skills, including basic vocabulary, grammar, and sentence structures. Through interactive lessons and hands-on practice, you'll learn to express yourself through gestures and facial expressions, enabling effective communication with the deaf and hard of hearing community. Join us today and begin breaking down communication barriers.
Start your sign language journey with our Base Level Curriculum. Perfect for beginners, this Curriculum offers essential sign language skills, including basic vocabulary, grammar, and sentence structures. Through interactive lessons and hands-on practice, you'll learn to express yourself through gestures and facial expressions, enabling effective communication with the deaf and hard of hearing community. Join us today and begin breaking down communication barriers.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
2. Medium Level - Enhancing Sign Language Skills:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Take your sign language skills to the next level with our Medium Level course. Designed for learners with some basic knowledge of sign language, this course focuses on expanding vocabulary, improving grammar usage, and honing expressive abilities. Engage in challenging yet rewarding lessons, interactive exercises, role-playing scenarios, and conversations to strengthen fluency. By delving deeper into sign language communication, including idiomatic expressions and storytelling techniques, you'll be able to connect with the deaf community on a deeper level.
Take your sign language skills to the next level with our Medium Level Curriculum. Designed for learners with some basic knowledge of sign language, this Curriculum focuses on expanding vocabulary, improving grammar usage, and honing expressive abilities. Engage in challenging yet rewarding lessons, interactive exercises, role-playing scenarios, and conversations to strengthen fluency. By delving deeper into sign language communication, including idiomatic expressions and storytelling techniques, you'll be able to connect with the deaf community on a deeper level.
</Typography>
<Typography variant="subtitle1" sx={{ mt: 3 }}>
3. Advanced Level - Mastering Sign Language:
</Typography>
<Typography variant="body2" sx={{ mt: 3 }}>
Become a proficient sign language user with our Advanced Level course. This comprehensive course is designed for experienced sign language learners seeking mastery. Dive into advanced topics such as complex grammar structures, specialized vocabulary, and cultural nuances. Through immersive activities, real-life simulations, and in-depth discussions, you'll refine your receptive and expressive skills. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level course equips you to engage confidently in diverse sign language contexts.
Become a proficient sign language user with our Advanced Level Curriculum. This comprehensive Curriculum is designed for experienced sign language learners seeking mastery. Dive into advanced topics such as complex grammar structures, specialized vocabulary, and cultural nuances. Through immersive activities, real-life simulations, and in-depth discussions, you'll refine your receptive and expressive skills. Explore various sign language modalities and gain a deep understanding of different signing systems. With personalized feedback and guidance from expert instructors, our Advanced Level Curriculum equips you to engage confidently in diverse sign language contexts.
</Typography>
<Typography variant="subtitle2" sx={{ mt: 3 }}>
Whether you're starting from scratch or aiming to enhance your existing sign language skills, our courses offer a supportive learning environment and the opportunity to build connections with the deaf community. Join us today and embark on your sign language journey!
Whether you're starting from scratch or aiming to enhance your existing sign language skills, our Curriculums offer a supportive learning environment and the opportunity to build connections with the deaf community. Join us today and embark on your sign language journey!
</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
<Grid md={12} item>
<CarouselAnimation data={curriculums} />
{curriculums && <CarouselAnimation data={curriculums} />}
</Grid>
</Grid>
</Container >
......
Project/Frontend/Web_App/src/pages/dashboard/spokenLanguageTranslation-module/index.tsx
View file @ 9f45a25f
......@@ -173,10 +173,7 @@ export default function SpokenLanguageTranslationHomePage() {
</Card>
</Grid>
</>}
</Grid>
</Grid>
</Container>
</>
);
......
Project/Frontend/Web_App/src/routes/paths.ts
View file @ 9f45a25f
......@@ -104,7 +104,11 @@ export const PATH_DASHBOARD = {
learningModule: {
root: path(ROOTS_DASHBOARD, '/learning-module'),
curriculumHome: path(ROOTS_DASHBOARD, '/learning-module/curriculum'),
curriculumView: path(ROOTS_DASHBOARD, '/learning-module/curriculum/process'),
curriculumList: path(ROOTS_DASHBOARD, '/learning-module/curriculum/curriculums'),
curriculumView: (curriculumId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}`),
tutorialList: (curriculumId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}/tutorials`),
tutorialView:(curriculumId: string, tutorialId: string) => path(ROOTS_DASHBOARD, `/learning-module/curriculum/curriculums/${curriculumId}/tutorials/${tutorialId}`),
// curriculumView: path(ROOTS_DASHBOARD, '/learning-module/curriculum/process'),
questionAndAnswersHome: path(ROOTS_DASHBOARD, '/learning-module/questionAndAnswers'),
leadBoardHome: path(ROOTS_DASHBOARD, '/learning-module/leadBoard'),
feedbackHome: path(ROOTS_DASHBOARD, '/learning-module/feedback'),
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselAnimation.tsx
View file @ 9f45a25f
......@@ -68,6 +68,7 @@ type CarouselItemProps = {
title: string;
description: string;
image: string;
id: string
};
isActive: boolean;
};
......@@ -75,7 +76,7 @@ type CarouselItemProps = {
function CarouselItem({ item, isActive }: CarouselItemProps) {
const theme = useTheme();
const { image, title } = item;
const { image, title, id } = item;
return (
<Paper sx={{ position: 'relative', height: 500 }}>
......@@ -121,7 +122,7 @@ function CarouselItem({ item, isActive }: CarouselItemProps) {
</m.div>
<m.div variants={varFade().inRight}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView(item.id)}>
<Button variant="contained" sx={{ mt: 3 }}>
View The Curriculum
</Button>
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx
View file @ 9f45a25f
......@@ -15,9 +15,10 @@ type Props = {
image: string;
description: string;
}[];
curriculumId?: string | string[]
};
export default function CarouselCenterMode({ data }: Props) {
export default function CarouselCenterMode({ data, curriculumId }: Props) {
const carouselRef = useRef<Carousel | null>(null);
const theme = useTheme();
......@@ -67,7 +68,7 @@ export default function CarouselCenterMode({ data }: Props) {
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item) => (
<Box key={item.id} sx={{ px: 1 }}>
<CarouselItem item={item} />
<CarouselItem item={item} curriculumId={curriculumId!.toString()} />
</Box>
))}
</Carousel>
......@@ -76,18 +77,17 @@ export default function CarouselCenterMode({ data }: Props) {
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
title: string;
description: string;
image: string;
id: string
};
function CarouselItem({ item }: { item: CarouselItemProps }) {
function CarouselItem({ item, curriculumId }: { item: CarouselItemProps, curriculumId: string }) {
const theme = useTheme();
const { image, title } = item;
const { image, title, id } = item;
return (
<Paper
......@@ -127,7 +127,7 @@ function CarouselItem({ item }: { item: CarouselItemProps }) {
transition: (theme) => theme.transitions.create('opacity'),
'&:hover': { opacity: 1 },
}}
href={PATH_DASHBOARD.learningModule.curriculumView}
href={PATH_DASHBOARD.learningModule.tutorialView(curriculumId, id)}
>
learn More
<Iconify icon="eva:arrow-forward-fill" width={16} sx={{ ml: 1 }} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment