1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / Home /
Filename : TopDestination.jsx
back
'use client'

import React, { useCallback, useEffect, useRef } from 'react'
import cn from '@/helpers/cn'
import useEmblaCarousel from 'embla-carousel-react'
import Autoplay from 'embla-carousel-autoplay'
import ClassNames from 'embla-carousel-class-names'
import Image from 'next/image'
import '@/app/assets/css/embla__destination_carousel.css'
import { Flex } from 'antd'
import Link from 'next/link'
import PrimaryButton from '../../buttons/PrimaryButton'

const TWEEN_FACTOR_BASE = 0.22
const numberWithinRange = (number, min, max) => Math.min(Math.max(number, min), max)

export default function TopDestination() {
    const options = { align: 'center', loop: true }
    const slides = [
        {
            src: '/assets/images/destination/destination_1_3.jpg',
            alt: 'Belgium',
            alt2: '12 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_5.jpg',
            alt: 'Thailand',
            alt2: '23 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_1.jpg',
            alt: 'Nepal',
            alt2: '56 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_2.jpg',
            alt: 'Hawaie',
            alt2: '9 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_3.jpg',
            alt: 'Belgium',
            alt2: '23 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_4.jpg',
            alt: 'Island',
            alt2: '11 Listing',
            href: '#',
        },
        {
            src: '/assets/images/destination/destination_1_5.jpg',
            alt: 'Thailand',
            alt2: '16 Listing',
            href: '#',
        },
    ]

    const tweenFactor = useRef(0)
    const tweenNodes = useRef([])

    const [emblaRef, emblaApi] = useEmblaCarousel(options, [ClassNames(), Autoplay({ playOnInit: true, delay: 8000, stopOnInteraction: false })])

    const setTweenNodes = useCallback(emblaApi => {
        tweenNodes.current = emblaApi.slideNodes().map(slideNode => {
            return slideNode.querySelector('.embla__slide__img')
        })
    }, [])

    const setTweenFactor = useCallback(emblaApi => {
        tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length
    }, [])

    const tweenScale = useCallback((emblaApi, eventName) => {
        const engine = emblaApi.internalEngine()
        const scrollProgress = emblaApi.scrollProgress()
        const slidesInView = emblaApi.slidesInView()
        const isScrollEvent = eventName === 'scroll'

        emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {
            let diffToTarget = scrollSnap - scrollProgress
            const slidesInSnap = engine.slideRegistry[snapIndex]

            slidesInSnap.forEach(slideIndex => {
                if (isScrollEvent && !slidesInView.includes(slideIndex)) return

                if (engine.options.loop) {
                    engine.slideLooper.loopPoints.forEach(loopItem => {
                        const target = loopItem.target()

                        if (slideIndex === loopItem.index && target !== 0) {
                            const sign = Math.sign(target)

                            if (sign === -1) {
                                diffToTarget = scrollSnap - (1 + scrollProgress)
                            }
                            if (sign === 1) {
                                diffToTarget = scrollSnap + (1 - scrollProgress)
                            }
                        }
                    })
                }

                const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current)
                const scale = numberWithinRange(tweenValue, 0, 1).toString()
                const tweenNode = tweenNodes.current[slideIndex]
                tweenNode.style.transform = `scale(${scale})`
                tweenNode.style.position = 'relative'
                tweenNode.style.zIndex = Math.round(scale * 20)
                if (scale < 0.99) {
                    tweenNode.style.filter = `blur(4px)`
                } else {
                    tweenNode.style.filter = `blur(0px)`
                }
            })
        })
    }, [])

    useEffect(() => {
        if (!emblaApi) return

        setTweenNodes(emblaApi)
        setTweenFactor(emblaApi)
        tweenScale(emblaApi)

        emblaApi.on('reInit', setTweenNodes).on('reInit', setTweenFactor).on('reInit', tweenScale).on('scroll', tweenScale).on('slideFocus', tweenScale)
    }, [emblaApi, tweenScale])

    return (
        <div className='py-14 md:py-24 mx-container'>
            <h1 className={cn('text-base md:text-4xl text-center text-gray-800')}>Top Destination</h1>
            <h1 className='text-4xl md:text-5xl font-semibold mt-1 text-center text-gray-800'>Popular Destination</h1>
            <section className='embla_dest mt-4 md:mt-14'>
                <div className='embla__viewport' ref={emblaRef}>
                    <div className='embla__container'>
                        {slides.map((slide, index) => (
                            <div className='embla__slide embla__class-names' key={index}>
                                <Flex vertical justify='center' align='center' className='flex embla__slide__img relative'>
                                    <Image src={slide.src} alt={slide.alt} width={0} height={0} sizes='100%' className='w-full h-auto rounded-xl' />
                                    <Flex justify='space-between' align='center' className='absolute bottom-0 left-0 w-full p-5'>
                                        <div>
                                            <h4 className='text-xl font-[500] text-white mt-4'>{slide.alt}</h4>
                                            <h5 className='text-sm text-white'>{slide.alt2}</h5>
                                        </div>
                                        <Link href={slide.href}>
                                            {/* <Button className="text-sm px-4 py-2">
                                                View All
                                            </Button> */}

                                            <PrimaryButton
                                                customChild
                                                className='border border-white transition-colors duration-500 bg-transparent before:bg-white text-white hover:text-black group/segekep text-sm px-4 py-2'>
                                                <span className='relative z-10'>View All</span>
                                                <svg
                                                    className='relative z-10 group-hover/segekep:inline-block hidden'
                                                    width='24'
                                                    height='24'
                                                    viewBox='0 0 24 24'
                                                    fill='none'
                                                    xmlns='http://www.w3.org/2000/svg'>
                                                    <path
                                                        d='M12 2.12207C12 3.16637 13.0349 4.72907 14.0811 6.04147C15.4283 7.73117 17.0361 9.20727 18.881 10.3343C20.2631 11.1782 21.9414 11.9883 23.2896 11.9883M12 21.8789C12 20.8346 13.0349 19.2719 14.0811 17.9595C15.4283 16.2699 17.0361 14.7937 18.881 13.6667C20.2631 12.8228 21.9414 12.0127 23.2896 12.0127M23.2896 12.0005H0.710403'
                                                        stroke='black'
                                                    />
                                                </svg>
                                                <svg
                                                    className='relative z-10 group-hover/segekep:hidden inline-block'
                                                    width='24'
                                                    height='24'
                                                    viewBox='0 0 24 24'
                                                    fill='none'
                                                    xmlns='http://www.w3.org/2000/svg'>
                                                    <path
                                                        d='M12 2.12207C12 3.16637 13.0349 4.72907 14.0811 6.04147C15.4283 7.73117 17.0361 9.20727 18.881 10.3343C20.2631 11.1782 21.9414 11.9883 23.2896 11.9883M12 21.8789C12 20.8346 13.0349 19.2719 14.0811 17.9595C15.4283 16.2699 17.0361 14.7937 18.881 13.6667C20.2631 12.8228 21.9414 12.0127 23.2896 12.0127M23.2896 12.0005H0.710403'
                                                        stroke='white'
                                                    />
                                                </svg>
                                            </PrimaryButton>
                                        </Link>
                                    </Flex>
                                </Flex>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </div>
    )
}