-
Notifications
You must be signed in to change notification settings - Fork 1
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
Showing
19 changed files
with
1,143 additions
and
1,984 deletions.
There are no files selected for viewing
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
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
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
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
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,50 @@ | ||
| import React from 'react' | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { ImageSlider } from './ImageSlider' | ||
| import { sliderData } from '../../data/SliderData' | ||
|
|
||
| const meta: Meta<typeof ImageSlider> = { | ||
| title: 'Components/Image Slider', | ||
| component: ImageSlider, | ||
| tags: ['autodocs'], | ||
| parameters: { | ||
| controls: { | ||
| sort: 'requiredFirst', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof ImageSlider> | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| customClass: 'slider', | ||
| slidesPerViewMobile: 1, | ||
| slidesPerViewTablet: 3, | ||
| slidesPerViewDesktop: 4, | ||
| loop: true, | ||
| speed: 1000, | ||
| }, | ||
| render: (args) => { | ||
| return ( | ||
| <ImageSlider {...args}> | ||
| {sliderData.map((image, index) => { | ||
| const { image: imageUrl, title, link, focalPointX, focalPointY, aspectRatio } = image | ||
| return ( | ||
| <ImageSlider.Item | ||
| key={index} | ||
| imageUrl={imageUrl} | ||
| title={title} | ||
| link={link} | ||
| focalPointX={focalPointX} | ||
| focalPointY={focalPointY} | ||
| aspectRatio={aspectRatio} | ||
| className={index == 0 ? `swiper-slide-active` : ``} | ||
| /> | ||
| ) | ||
| })} | ||
| </ImageSlider> | ||
| ) | ||
| }, | ||
| } |
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,56 @@ | ||
| import { useEffect } from 'react' | ||
| import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid' | ||
| import { ImageSliderItem } from './ImageSliderItem' | ||
| import SwiperSlider from './script' | ||
|
|
||
| export interface ImageSliderProp { | ||
| children: React.ReactNode | ||
| loop?: boolean | ||
| speed?: number | ||
| slidesPerViewMobile?: number | ||
| slidesPerViewTablet?: number | ||
| slidesPerViewDesktop: number | ||
| customClass?: string | ||
| } | ||
|
|
||
| export const ImageSliderWrapper = ({ | ||
| children, | ||
| loop = false, | ||
| speed = 500, | ||
| slidesPerViewMobile = 1, | ||
| slidesPerViewTablet = 2, | ||
| slidesPerViewDesktop = 3, | ||
| customClass, | ||
| }: ImageSliderProp) => { | ||
| useEffect(() => { | ||
| SwiperSlider() | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div | ||
| className={`swiper swiper--slider ${customClass ? customClass : ''}`} | ||
| data-swiper-class={`${customClass ? customClass : 'swiper'}`} | ||
| data-swiper-loop={loop} | ||
| data-swiper-speed={speed} | ||
| data-swiper-perview-mobile={slidesPerViewMobile} | ||
| data-swiper-perview-tablet={slidesPerViewTablet} | ||
| data-swiper-perview-desktop={slidesPerViewDesktop} | ||
| > | ||
| <div className="swiper-wrapper">{children}</div> | ||
| <div className="swiper__footer"> | ||
| <button type="button" className="swiper__button swiper__button--prev" aria-label="Previous slide"> | ||
| <ChevronLeftIcon className="w-8 h-8 [&>path]:stroke-[2]" aria-hidden="true" /> | ||
| </button> | ||
| <button type="button" className="swiper__button swiper__button--next" aria-label="Next slide"> | ||
| <ChevronRightIcon className="w-8 h-8 [&>path]:stroke-[2]" aria-hidden="true" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const ImageSlider = Object.assign(ImageSliderWrapper, { | ||
| Item: ImageSliderItem, | ||
| }) | ||
|
|
||
| ImageSliderWrapper.displayName = 'ImageSlider' |
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,57 @@ | ||
| import { aspectRatioClasses } from '../../utils/propClasses' | ||
| import { useLinkContext } from '../LinkProvider/useLinkContext' | ||
|
|
||
| type aspectRatioKeys = keyof typeof aspectRatioClasses | ||
|
|
||
| export interface ImageSliderItemProps { | ||
| imageUrl: string | ||
| focalPointX?: number | ||
| focalPointY?: number | ||
| title?: string | ||
| link?: string | ||
| aspectRatio?: aspectRatioKeys | ||
| className?: string | ||
| } | ||
|
|
||
| export const ImageSliderItem = ({ | ||
| imageUrl, | ||
| focalPointX = 50, | ||
| focalPointY = 50, | ||
| title, | ||
| link, | ||
| aspectRatio = 'landscape', | ||
| className, | ||
| }: ImageSliderItemProps) => { | ||
| const LinkComponent = useLinkContext() | ||
| const inlineImageStyles = { | ||
| backgroundImage: `url(${imageUrl})`, | ||
| backgroundPosition: `${focalPointX}% ${focalPointY}%`, | ||
| } | ||
|
|
||
| const classes = className ? `${className} swiper-slide` : 'swiper-slide' | ||
|
|
||
| return ( | ||
| <div className={classes}> | ||
| <div | ||
| className={`relative ${aspectRatioClasses[aspectRatio]} bg-cover bg-center rounded-lg bg-black w-full h-full transition-[width] duration-[5000] ease-in-out`} | ||
| style={inlineImageStyles} | ||
| > | ||
| {title && ( | ||
| <div | ||
| className={`bg-black/75 text-white absolute bottom-2 left-2 right-2 px-4 py-2.5 rounded-md ${link ? 'hover:bg-cu-red/85' : ''}`} | ||
| > | ||
| {link ? ( | ||
| <LinkComponent href={link} className="cursor-pointer block hover-bg-cu-red"> | ||
| <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p> | ||
| </LinkComponent> | ||
| ) : ( | ||
| <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| ImageSliderItem.displayName = 'ImageSlider.Item' |
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,49 @@ | ||
| import Swiper from 'swiper/bundle' | ||
|
|
||
| const SwiperSlider = () => { | ||
| const SwiperSliders = document.querySelectorAll('.swiper--slider') | ||
|
|
||
| if (SwiperSliders.length === 0) return | ||
|
|
||
| SwiperSliders.forEach((SwiperSlider) => { | ||
| const swiperClass = SwiperSlider.getAttribute('data-swiper-class') | ||
|
|
||
| if (swiperClass) { | ||
| const classname = `.${swiperClass}` | ||
| const swiperLoop = SwiperSlider.getAttribute('data-swiper-loop') === 'true' | ||
| const swiperSpeed = SwiperSlider.getAttribute('data-swiper-speed') || '500' | ||
| const swiperSlidesPerViewMobile = SwiperSlider.getAttribute('data-swiper-perview-mobile') || '1' | ||
| const swiperSlidesPerViewTablet = SwiperSlider.getAttribute('data-swiper-perview-tablet') || '3' | ||
| const swiperSlidesPerViewDesktop = SwiperSlider.getAttribute('data-swiper-perview-desktop') || '4' | ||
|
|
||
| new Swiper(classname, { | ||
| a11y: { | ||
| prevSlideMessage: 'Previous slide', | ||
| nextSlideMessage: 'Next slide', | ||
| }, | ||
| updateOnWindowResize: true, | ||
| loop: swiperLoop, | ||
| speed: parseInt(swiperSpeed), | ||
| slidesPerView: parseInt(swiperSlidesPerViewMobile), | ||
| spaceBetween: 8, | ||
| breakpoints: { | ||
| 768: { | ||
| // slidesPerView: 'auto', | ||
| slidesPerView: parseInt(swiperSlidesPerViewTablet), | ||
| }, | ||
| 1024: { | ||
| slidesPerView: parseInt(swiperSlidesPerViewDesktop), | ||
| }, | ||
| }, | ||
| centeredSlides: true, | ||
| pagination: false, | ||
| navigation: { | ||
| nextEl: '.swiper__button--next', | ||
| prevEl: '.swiper__button--prev', | ||
| }, | ||
| }) | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| export default SwiperSlider |
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,15 @@ | ||
| .swiper .swiper-slide { | ||
| @apply relative md:w-[250px] lg:w-[300px] md:h-[250px] lg:h-[300px] rounded-lg my-auto transition-[width] duration-[5000] ease-in-out; | ||
| } | ||
|
|
||
| .swiper .swiper-slide.swiper-slide-active { | ||
| @apply relative md:w-[300px] lg:w-[400px] md:h-[300px] lg:h-[400px] transition-[width] duration-[5000] ease-in-out; | ||
| } | ||
|
|
||
| .swiper__footer { | ||
| @apply flex gap-6 items-center justify-center mt-4 md:mt-8; | ||
| } | ||
|
|
||
| .swiper__button { | ||
| @apply bg-cu-black-800 text-white hover:bg-cu-red text-2xl relative flex items-center justify-center rounded-full p-1 h-12 w-12 z-50; | ||
| } |
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
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
Oops, something went wrong.