-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
379f10d
commit 3eeadea
Showing
5 changed files
with
191 additions
and
99 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
src/components/Carousel/DynamicSlides/CarouselDataCard/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Card, alpha, styled } from "@mui/material"; | ||
|
|
||
| const CarouselDataCard = styled(Card)(({ theme }) => ({ | ||
| position: 'absolute', | ||
| bottom: 50, | ||
| left: 50, | ||
| right: 0, | ||
| height: 'max-content', | ||
| width: 'max-content', | ||
| minWidth: '25rem', | ||
| padding: theme.Spaces.md, | ||
| backgroundColor: alpha(theme.palette.background.default, 0.5), | ||
| backdropFilter: 'blur(0.25rem)', | ||
| color: theme.palette.text.primary, | ||
| transition: theme.Transitions.createTransition({ | ||
| property: 'transform', | ||
| duration: 'shortest', | ||
| }), | ||
| })); | ||
|
|
||
| export default CarouselDataCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react' | ||
| import Image from 'next/image'; | ||
| import { CarouselData } from '../carouselData'; | ||
| import { styled } from '@mui/material'; | ||
| import { SplideSlide } from '@splidejs/react-splide'; | ||
| import '@splidejs/splide/dist/css/themes/splide-default.min.css'; | ||
| import CarouselDataCard from './CarouselDataCard'; | ||
|
|
||
|
|
||
| const StyledImage = styled(Image)(({ theme }) => ({ | ||
| height: `calc(100dvh - ${theme.Heights.header.default})`, | ||
| width: '100%', | ||
| objectFit: 'cover', | ||
| })); | ||
|
|
||
|
|
||
|
|
||
| const DynamicSlide = ({ image, title, id, description, link, active }: CarouselData & { active?: boolean }) => { | ||
|
|
||
| let slideTitle = title; | ||
| let slideImage = image; | ||
| let slideId = id; | ||
| let slideKey = `slide-${id}`; | ||
|
|
||
| if (typeof window === 'undefined') { | ||
| slideTitle = 'Loading...'; | ||
| slideImage = '/images/placeholder.png'; | ||
| slideId = 0; | ||
| } | ||
|
|
||
| return ( | ||
| <SplideSlide key={slideKey}> | ||
| <StyledImage | ||
| width="1920" | ||
| height="1080" | ||
| src={image} | ||
| alt={title} | ||
| /> | ||
| <CarouselDataCard className={active ? 'active' : ''}> | ||
| <h1>{title}</h1> | ||
| <p>{description}</p> | ||
| </CarouselDataCard> | ||
| </SplideSlide> | ||
| ); | ||
| }; | ||
|
|
||
| export default DynamicSlide; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React from 'react'; | ||
| import dynamic from 'next/dynamic'; | ||
| import carouselData from '../carouselData'; | ||
| import DynamicSlide from './UnitSlide'; | ||
| import '@splidejs/splide/dist/css/themes/splide-default.min.css'; | ||
|
|
||
|
|
||
| const arrowPath = 'M15.71 3.854 13.685 5.951 28.153 19.923 13.858 34.074 15.91 36.146 32.315 19.904 15.71 3.854z'; | ||
| const options = { | ||
| type: 'loop', | ||
| perPage: 1, | ||
| perMove: 1, | ||
| lazyLoad: 'nearby', | ||
| drag: 'free', | ||
| snap: true, | ||
| pagination: false, | ||
| arrows: true, | ||
| arrowPath, | ||
| autoplay: true, | ||
| pauseOnHover: true, | ||
| interval: 5000, | ||
| gap: '1rem', | ||
| padding: '9.5rem', | ||
| breakpoints: { | ||
| 900: { | ||
| perPage: 2, | ||
| arrows: false, | ||
| }, | ||
| 768: { | ||
| perPage: 1, | ||
| arrows: false, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| interface DynamicSplideProps { | ||
| options?: any; | ||
| children?: React.ReactNode; | ||
| onMove?: (splide: any, newIndex: number) => void; | ||
| }; | ||
|
|
||
| // Explicitly naming the component | ||
| const DynamicSplide = dynamic<DynamicSplideProps>(() => import('@splidejs/react-splide').then((mod) => mod.Splide), { | ||
| ssr: false, | ||
| }); | ||
|
|
||
| const DynamicSlides = () => { | ||
| return ( | ||
| <DynamicSplide | ||
| options={options} | ||
| onMove={(splide, newIndex) => { | ||
| console.log('splide', splide); | ||
| console.log('moved', newIndex); | ||
| }} | ||
| > | ||
| {carouselData.map((slideData) => ( | ||
| <DynamicSlide active {...slideData} /> | ||
| ))} | ||
| </DynamicSplide> | ||
| ) | ||
| } | ||
|
|
||
| export default DynamicSlides |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| export interface CarouselData { | ||
| id: number; | ||
| title: string; | ||
| description: string; | ||
| image: string; | ||
| link: string; | ||
| } | ||
|
|
||
| const carouselData : CarouselData[] = [ | ||
| { | ||
| id: 1, | ||
| title: "First Slide", | ||
| description: "This is the first slide", | ||
| image: "/images/home/container-1/slide-1.jpg", | ||
| link: "/", | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "Second Slide", | ||
| description: "This is the second slide", | ||
| image: "/images/home/container-1/slide-2.jpg", | ||
| link: "/", | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: "Third Slide", | ||
| description: "This is the third slide", | ||
| image: "/images/home/container-1/slide-3.jpg", | ||
| link: "/", | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: "Fourth Slide", | ||
| description: "This is the fourth slide", | ||
| image: "/images/home/container-1/slide-4.jpg", | ||
| link: "/", | ||
| }, | ||
| { | ||
| id: 5, | ||
| title: "Fifth Slide", | ||
| description: "This is the fifth slide", | ||
| image: "/images/home/container-1/slide-5.jpg", | ||
| link: "/", | ||
| }, | ||
| { | ||
| id: 6, | ||
| title: "Sixth Slide", | ||
| description: "This is the sixth slide", | ||
| image: "/images/home/container-1/slide-6.jpg", | ||
| link: "/", | ||
| }, | ||
| ]; | ||
|
|
||
| export default carouselData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters