Skip to content

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

fix: update

parent 93cfc676
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 629 additions and 200 deletions
Project/Frontend/Web_App/src/components/mega-menu/MegaMenuDesktopVertical.tsx
View file @ a2d51d2a
...@@ -17,7 +17,7 @@ import MegaMenuCarousel from './MenuCarousel'; ...@@ -17,7 +17,7 @@ import MegaMenuCarousel from './MenuCarousel';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
const MENU_PAPER_WIDTH = 800; const MENU_PAPER_WIDTH = 800;
const PARENT_ITEM_HEIGHT = 40; const PARENT_ITEM_HEIGHT = 60;
type Props = { type Props = {
data: MegaMenuItemProps[]; data: MegaMenuItemProps[];
......
Project/Frontend/Web_App/src/layouts/dashboard/nav/NavVertical.tsx
View file @ a2d51d2a
...@@ -2,20 +2,18 @@ import { useEffect } from 'react'; ...@@ -2,20 +2,18 @@ import { useEffect } from 'react';
// next // next
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
// @mui // @mui
import { Box, Stack, Drawer, Button } from '@mui/material'; import { Box, Button, Drawer, Stack } from '@mui/material';
// hooks // hooks
import useResponsive from '../../../hooks/useResponsive'; import useResponsive from '../../../hooks/useResponsive';
// config // config
import { NAV } from '../../../config'; import { NAV } from '../../../config';
// components // components
import Logo from '../../../components/logo';
import Scrollbar from '../../../components/scrollbar';
import { NavSectionVertical } from '../../../components/nav-section'; import { NavSectionVertical } from '../../../components/nav-section';
import Scrollbar from '../../../components/scrollbar';
// //
import navConfig from './config';
import NavDocs from './NavDocs';
import NavAccount from './NavAccount';
import { useSettingsContext } from 'src/components/settings'; import { useSettingsContext } from 'src/components/settings';
import NavAccount from './NavAccount';
import navConfig from './config';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
...@@ -38,12 +36,12 @@ export default function NavVertical({ openNav, onCloseNav }: Props) { ...@@ -38,12 +36,12 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
value: 'mini' value: 'mini'
} }
} as React.ChangeEvent<HTMLInputElement>) } as React.ChangeEvent<HTMLInputElement>)
}else { } else {
onChangeLayout({ onChangeLayout({
target: { target: {
value: 'vertical' value: 'vertical'
} }
} as React.ChangeEvent<HTMLInputElement> ) } as React.ChangeEvent<HTMLInputElement>)
} }
} }
...@@ -75,7 +73,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) { ...@@ -75,7 +73,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
}} }}
> >
<Button onClick={onClickHan}>Change Layout</Button> <Button onClick={onClickHan}>Change Layout</Button>
{/* <Logo /> */} {/* <Logo /> */}
<NavAccount /> <NavAccount />
...@@ -84,8 +82,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) { ...@@ -84,8 +82,7 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
<NavSectionVertical data={navConfig} /> <NavSectionVertical data={navConfig} />
<Box sx={{ flexGrow: 1 }} /> <Box sx={{ flexGrow: 1 }} />
<NavDocs />
</Scrollbar> </Scrollbar>
); );
......
Project/Frontend/Web_App/src/layouts/dashboard/nav/config.tsx
View file @ a2d51d2a
// routes // routes
import { PATH_DASHBOARD } from '../../../routes/paths'; import { PATH_DASHBOARD } from '../../../routes/paths';
// components // components
import Label from '../../../components/label';
import Iconify from '../../../components/iconify';
import SvgColor from '../../../components/svg-color'; import SvgColor from '../../../components/svg-color';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
...@@ -33,206 +31,31 @@ const ICONS = { ...@@ -33,206 +31,31 @@ const ICONS = {
ecommerce: icon('ic_ecommerce'), ecommerce: icon('ic_ecommerce'),
analytics: icon('ic_analytics'), analytics: icon('ic_analytics'),
dashboard: icon('ic_dashboard'), dashboard: icon('ic_dashboard'),
learning: icon('ic_learning')
}; };
const navConfig = [ const navConfig = [
// GENERAL // GENERAL
// ----------------------------------------------------------------------
{ {
subheader: 'general', subheader: 'general',
items: [ items: [
{ title: 'app', path: PATH_DASHBOARD.general.app, icon: ICONS.dashboard }, { title: 'app', path: PATH_DASHBOARD.general.app, icon: ICONS.dashboard },
{ title: 'ecommerce', path: PATH_DASHBOARD.general.ecommerce, icon: ICONS.ecommerce }, { title: 'blank', path: PATH_DASHBOARD.blank, icon: ICONS.blank },
{ title: 'analytics', path: PATH_DASHBOARD.general.analytics, icon: ICONS.analytics }, // Sign Language Learning Module items
{ title: 'banking', path: PATH_DASHBOARD.general.banking, icon: ICONS.banking },
{ title: 'booking', path: PATH_DASHBOARD.general.booking, icon: ICONS.booking },
{ title: 'file', path: PATH_DASHBOARD.general.file, icon: ICONS.file },
],
},
// MANAGEMENT
// ----------------------------------------------------------------------
{
subheader: 'management',
items: [
// USER
{
title: 'user',
path: PATH_DASHBOARD.user.root,
icon: ICONS.user,
children: [
{ title: 'profile', path: PATH_DASHBOARD.user.profile },
{ title: 'cards', path: PATH_DASHBOARD.user.cards },
{ title: 'list', path: PATH_DASHBOARD.user.list },
{ title: 'create', path: PATH_DASHBOARD.user.new },
{ title: 'edit', path: PATH_DASHBOARD.user.demoEdit },
{ title: 'account', path: PATH_DASHBOARD.user.account },
],
},
// E-COMMERCE
{
title: 'ecommerce',
path: PATH_DASHBOARD.eCommerce.root,
icon: ICONS.cart,
children: [
{ title: 'shop', path: PATH_DASHBOARD.eCommerce.shop },
{ title: 'product', path: PATH_DASHBOARD.eCommerce.demoView },
{ title: 'list', path: PATH_DASHBOARD.eCommerce.list },
{ title: 'create', path: PATH_DASHBOARD.eCommerce.new },
{ title: 'edit', path: PATH_DASHBOARD.eCommerce.demoEdit },
{ title: 'checkout', path: PATH_DASHBOARD.eCommerce.checkout },
],
},
// INVOICE
{ {
title: 'invoice', title: 'Learning Module',
path: PATH_DASHBOARD.invoice.root, path: PATH_DASHBOARD.learningModule.root,
icon: ICONS.invoice, icon: ICONS.learning,
children: [ children: [
{ title: 'list', path: PATH_DASHBOARD.invoice.list }, { title: 'Curriculum', path: PATH_DASHBOARD.learningModule.curriculumHome },
{ title: 'details', path: PATH_DASHBOARD.invoice.demoView }, { title: 'Question and Answers', path: PATH_DASHBOARD.learningModule.questionAndAnswersHome },
{ title: 'create', path: PATH_DASHBOARD.invoice.new }, { title: 'Lead Board', path: PATH_DASHBOARD.learningModule.leadBoardHome },
{ title: 'edit', path: PATH_DASHBOARD.invoice.demoEdit }, { title: 'Feedback', path: PATH_DASHBOARD.learningModule.feedbackHome },
], ],
}, },
// BLOG
{
title: 'blog',
path: PATH_DASHBOARD.blog.root,
icon: ICONS.blog,
children: [
{ title: 'posts', path: PATH_DASHBOARD.blog.posts },
{ title: 'post', path: PATH_DASHBOARD.blog.demoView },
{ title: 'create', path: PATH_DASHBOARD.blog.new },
],
},
{
title: 'File manager',
path: PATH_DASHBOARD.fileManager,
icon: ICONS.folder,
},
],
},
// APP
// ----------------------------------------------------------------------
{
subheader: 'app',
items: [
{
title: 'mail',
path: PATH_DASHBOARD.mail.root,
icon: ICONS.mail,
info: <Label color="error">+32</Label>,
},
{
title: 'chat',
path: PATH_DASHBOARD.chat.root,
icon: ICONS.chat,
},
{
title: 'calendar',
path: PATH_DASHBOARD.calendar,
icon: ICONS.calendar,
},
{
title: 'kanban',
path: PATH_DASHBOARD.kanban,
icon: ICONS.kanban,
},
], ],
}, },
// DEMO MENU STATES
{
subheader: 'Other cases',
items: [
{
// default roles : All roles can see this entry.
// roles: ['user'] Only users can see this item.
// roles: ['admin'] Only admin can see this item.
// roles: ['admin', 'manager'] Only admin/manager can see this item.
// Reference from 'src/guards/RoleBasedGuard'.
title: 'item_by_roles',
path: PATH_DASHBOARD.permissionDenied,
icon: ICONS.lock,
roles: ['admin'],
caption: 'only_admin_can_see_this_item',
},
{
title: 'menu_level',
path: '#/dashboard/menu_level',
icon: ICONS.menuItem,
children: [
{
title: 'menu_level_2a',
path: '#/dashboard/menu_level/menu_level_2a',
},
{
title: 'menu_level_2b',
path: '#/dashboard/menu_level/menu_level_2b',
children: [
{
title: 'menu_level_3a',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3a',
},
{
title: 'menu_level_3b',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b',
children: [
{
title: 'menu_level_4a',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b/menu_level_4a',
},
{
title: 'menu_level_4b',
path: '#/dashboard/menu_level/menu_level_2b/menu_level_3b/menu_level_4b',
},
],
},
],
},
],
},
{
title: 'item_disabled',
path: '#disabled',
icon: ICONS.disabled,
disabled: true,
},
{
title: 'item_label',
path: '#label',
icon: ICONS.label,
info: (
<Label color="info" startIcon={<Iconify icon="eva:email-fill" />}>
NEW
</Label>
),
},
{
title: 'item_caption',
path: '#caption',
icon: ICONS.menuItem,
caption:
'Quisque malesuada placerat nisl. In hac habitasse platea dictumst. Cras id dui. Pellentesque commodo eros a enim. Morbi mollis tellus ac sapien.',
},
{
title: 'item_external_link',
path: 'https://www.google.com/',
icon: ICONS.external,
},
{
title: 'blank',
path: PATH_DASHBOARD.blank,
icon: ICONS.blank,
},
],
},
]; ];
export default navConfig; export default navConfig;
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Grid } from '@mui/material';
import Head from 'next/head';
import _mock from 'src/_mock/_mock';
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';
import CarouselCenterMode from 'src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
CurriculumHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumHomePage() {
const { themeStretch } = useSettingsContext();
const _carouselsExample = [...Array(5)].map((_, index) => ({
id: _mock.id(index),
title: _mock.text.title(index),
image: _mock.image.cover(index),
description: _mock.text.description(index),
}));
return (
<>
<Head>
<title> Curriculum Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Curriculum', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<CarouselAnimation data={_carouselsExample} />
</Grid>
<Grid md={12} item>
<CarouselCenterMode data={_carouselsExample} />
</Grid>
</Grid>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/curriculum/process.tsx 0 → 100644
View file @ a2d51d2a
import { Card, CardContent, CardHeader, Container, Grid, Typography } from '@mui/material';
import Head from 'next/head';
import { useState } from 'react';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Editor from 'src/components/editor/Editor';
import Iconify from 'src/components/iconify/Iconify';
import { MegaMenuDesktopVertical, MegaMenuItemProps } from 'src/components/mega-menu';
import Scrollbar from 'src/components/scrollbar/Scrollbar';
import { NAV } from 'src/config';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
CurriculumProcessPage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function CurriculumProcessPage() {
const { themeStretch } = useSettingsContext();
const [quillSimple, setQuillSimple] = useState('');
const ICON_SIZE = {
width: '100%',
height: '100%',
};
const data: MegaMenuItemProps[] = [
{
title: 'Parent 1',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 2',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 3',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 4',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 5',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 6',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 7',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 8',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 9',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
{
title: 'Parent 10',
path: '#',
icon: <Iconify icon="eva:file-fill" {...ICON_SIZE} />,
},
];
return (
<>
<Head>
<title> Curriculum Process | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Curriculum Process"
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: 'Curriculum Process', 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 }} /> Curriculum Items
</Typography>
<MegaMenuDesktopVertical data={data} />
</Card>
</Grid>
<Grid md={9} item>
<Grid container spacing={2} rowSpacing={2}>
<Grid md={12} item>
<Card>
<CardHeader title="Curriculum Item 01" />
<CardContent sx={{ height: 200 }}>
<Scrollbar>
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam.
Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras
ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum
elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat
pretium libero. Nullam quis ante.
</Scrollbar>
</CardContent>
</Card>
</Grid>
<Grid md={12} item>
<Card>
<CardHeader title="Curriculum item 01 work space" />
<CardContent>
<Editor
simple
id="simple-editor"
value={quillSimple}
onChange={(value) => setQuillSimple(value)}
/>
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/feedback/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Typography } from '@mui/material';
import Head from 'next/head';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
FeedbackHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function FeedbackHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Feedback Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Feedback"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Feedback', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/leadBoard/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container, Typography } from '@mui/material';
import Head from 'next/head';
import { useSettingsContext } from '../../../../components/settings';
import DashboardLayout from '../../../../layouts/dashboard';
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs';
import Iconify from 'src/components/iconify/Iconify';
LeadBoardHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function LeadBoardHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Lead Board Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Lead Board"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Lead Board', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/pages/dashboard/learning-module/questionAndAnswers/index.tsx 0 → 100644
View file @ a2d51d2a
import { Container } 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';
QuestionAndAnswersHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function QuestionAndAnswersHomePage() {
const { themeStretch } = useSettingsContext();
return (
<>
<Head>
<title> Questions & Answers Home | SignLink </title>
</Head>
<Container maxWidth={themeStretch ? false : 'xl'}>
<CustomBreadcrumbs
heading="Questions & Answers"
links={[
{
name: 'Dashboard',
href: '#',
icon: <Iconify icon="eva:home-fill" />,
},
{ name: 'Learning Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> },
{ name: 'Questions & Answers', icon: <Iconify icon="eva:cube-outline" /> },
]}
/>
</Container>
<Container maxWidth={themeStretch ? false : 'xl'}>
</Container>
</>
);
}
Project/Frontend/Web_App/src/routes/paths.ts
View file @ a2d51d2a
...@@ -95,6 +95,14 @@ export const PATH_DASHBOARD = { ...@@ -95,6 +95,14 @@ export const PATH_DASHBOARD = {
view: (title: string) => path(ROOTS_DASHBOARD, `/blog/post/${title}`), view: (title: string) => path(ROOTS_DASHBOARD, `/blog/post/${title}`),
demoView: path(ROOTS_DASHBOARD, '/blog/post/apply-these-7-secret-techniques-to-improve-event'), demoView: path(ROOTS_DASHBOARD, '/blog/post/apply-these-7-secret-techniques-to-improve-event'),
}, },
learningModule: {
root: path(ROOTS_DASHBOARD, '/learning-module'),
curriculumHome: path(ROOTS_DASHBOARD, '/learning-module/curriculum'),
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'),
},
}; };
export const PATH_DOCS = { export const PATH_DOCS = {
......
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselAnimation.tsx 0 → 100644
View file @ a2d51d2a
import { m } from 'framer-motion';
import { useRef, useState } from 'react';
// @mui
import { Box, Button, Card, CardContent, Paper, Typography } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles';
// utils
import { bgGradient } from '../../../../utils/cssStyles';
// components
import Link from 'next/link';
import { PATH_DASHBOARD } from 'src/routes/paths';
import { MotionContainer, varFade } from '../../../../components/animate';
import Carousel, { CarouselArrowIndex } from '../../../../components/carousel';
import Image from '../../../../components/image';
// ----------------------------------------------------------------------
type Props = {
data: {
id: string;
title: string;
image: string;
description: string;
}[];
};
export default function CarouselAnimation({ data }: Props) {
const theme = useTheme();
const carouselRef = useRef<Carousel | null>(null);
const [currentIndex, setCurrentIndex] = useState(theme.direction === 'rtl' ? data.length - 1 : 0);
const carouselSettings = {
speed: 800,
dots: false,
arrows: false,
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
rtl: Boolean(theme.direction === 'rtl'),
beforeChange: (current: number, next: number) => setCurrentIndex(next),
};
const handlePrev = () => {
carouselRef.current?.slickPrev();
};
const handleNext = () => {
carouselRef.current?.slickNext();
};
return (
<Card>
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item, index) => (
<CarouselItem key={item.id} item={item} isActive={index === currentIndex} />
))}
</Carousel>
<CarouselArrowIndex
index={currentIndex}
total={data.length}
onNext={handleNext}
onPrevious={handlePrev}
/>
</Card>
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
item: {
title: string;
description: string;
image: string;
};
isActive: boolean;
};
function CarouselItem({ item, isActive }: CarouselItemProps) {
const theme = useTheme();
const { image, title } = item;
return (
<Paper sx={{ position: 'relative', height: 300 }}>
<Image alt={title} src={image} ratio="21/9" />
<Box
sx={{
top: 0,
width: 1,
height: 1,
position: 'absolute',
...bgGradient({
direction: 'to top',
startColor: `${theme.palette.grey[900]} 0%`,
endColor: `${alpha(theme.palette.grey[900], 0)} 100%`,
}),
}}
/>
<CardContent
component={MotionContainer}
animate={isActive}
action
sx={{
bottom: 0,
width: 1,
maxWidth: 720,
textAlign: 'left',
position: 'absolute',
color: 'common.white',
}}
>
<m.div variants={varFade().inRight}>
<Typography variant="h3" gutterBottom>
{item.title}
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Typography variant="body2" noWrap gutterBottom>
{item.description}
</Typography>
</m.div>
<m.div variants={varFade().inRight}>
<Link href={PATH_DASHBOARD.learningModule.curriculumView}>
<Button variant="contained" sx={{ mt: 3 }}>
View More
</Button>
</Link>
</m.div>
</CardContent>
</Paper>
);
}
Project/Frontend/Web_App/src/sections/@dashboard/learning-module/curriculum/CarouselCenterMode.tsx 0 → 100644
View file @ a2d51d2a
import { useRef } from 'react';
// @mui
import { alpha, useTheme } from '@mui/material/styles';
import { Box, Paper, Link, CardContent } from '@mui/material';
// utils
import { bgGradient } from '../../../../utils/cssStyles';
// components
import Image from '../../../../components/image';
import Iconify from '../../../../components/iconify';
import TextMaxLine from '../../../../components/text-max-line';
import Carousel, { CarouselArrows } from '../../../../components/carousel';
import { PATH_DASHBOARD } from 'src/routes/paths';
// ----------------------------------------------------------------------
type Props = {
data: {
id: string;
title: string;
image: string;
description: string;
}[];
};
export default function CarouselCenterMode({ data }: Props) {
const carouselRef = useRef<Carousel | null>(null);
const theme = useTheme();
const carouselSettings = {
slidesToShow: 3,
centerMode: true,
centerPadding: '60px',
rtl: Boolean(theme.direction === 'rtl'),
responsive: [
{
breakpoint: 1024,
settings: { slidesToShow: 2 },
},
{
breakpoint: 600,
settings: { slidesToShow: 2 },
},
{
breakpoint: 480,
settings: { slidesToShow: 1, centerPadding: '0' },
},
],
};
const handlePrev = () => {
carouselRef.current?.slickPrev();
};
const handleNext = () => {
carouselRef.current?.slickNext();
};
return (
<Box
sx={{
overflow: 'hidden',
position: 'relative',
}}
>
<CarouselArrows
filled
icon="noto:rightwards-hand"
onNext={handleNext}
onPrevious={handlePrev}
>
<Carousel ref={carouselRef} {...carouselSettings}>
{data.map((item) => (
<Box key={item.id} sx={{ px: 1 }}>
<CarouselItem item={item} />
</Box>
))}
</Carousel>
</CarouselArrows>
</Box>
);
}
// ----------------------------------------------------------------------
type CarouselItemProps = {
title: string;
description: string;
image: string;
};
function CarouselItem({ item }: { item: CarouselItemProps }) {
const theme = useTheme();
const { image, title } = item;
return (
<Paper
sx={{
borderRadius: 2,
overflow: 'hidden',
position: 'relative'
}}
>
<Image alt={title} src={image} ratio="3/4" />
<CardContent
sx={{
bottom: 0,
zIndex: 9,
width: '100%',
textAlign: 'left',
position: 'absolute',
color: 'common.white',
...bgGradient({
direction: 'to top',
startColor: `${theme.palette.grey[900]} 25%`,
endColor: `${alpha(theme.palette.grey[900], 0)} 100%`,
}),
}}
>
<TextMaxLine variant="h4" paragraph>
{title}
</TextMaxLine>
<Link
color="inherit"
variant="overline"
sx={{
opacity: 0.72,
alignItems: 'center',
display: 'inline-flex',
transition: (theme) => theme.transitions.create('opacity'),
'&:hover': { opacity: 1 },
}}
href={PATH_DASHBOARD.learningModule.curriculumView}
>
learn More
<Iconify icon="eva:arrow-forward-fill" width={16} sx={{ ml: 1 }} />
</Link>
</CardContent>
</Paper>
);
}
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