66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { ChevronDoubleDownIcon } from '@heroicons/react/24/solid';
|
|
import Slide from '@/components/Slide';
|
|
import Slide1 from '@/components/Slide1';
|
|
import Slide2 from '@/components/Slide2';
|
|
import Slide3 from '@/components/Slide3';
|
|
import Slide4 from '@/components/Slide4';
|
|
import Slide5 from '@/components/Slide5';
|
|
|
|
|
|
const slides = [
|
|
<Slide1 key={1} />,
|
|
<Slide2 key={2} />,
|
|
//<Slide3 key={3} />,
|
|
//<Slide4 key={4} />,
|
|
//<Slide5 key={5} />,
|
|
]
|
|
|
|
export default function Home() {
|
|
const [current, setCurrent] = useState(0)
|
|
|
|
|
|
const nextSlide = useCallback(() => {
|
|
if (current < slides.length - 1) setCurrent(current + 1)
|
|
}, [current])
|
|
|
|
const prevSlide = useCallback(() => {
|
|
if (current > 0) setCurrent(current - 1)
|
|
}, [current])
|
|
|
|
useEffect(() => {
|
|
const handleScroll = (e: WheelEvent) => {
|
|
if (e.deltaY > 0) nextSlide()
|
|
else prevSlide()
|
|
}
|
|
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'ArrowDown') nextSlide()
|
|
if (e.key === 'ArrowUp') prevSlide()
|
|
}
|
|
|
|
window.addEventListener('wheel', handleScroll)
|
|
window.addEventListener('keydown', handleKey)
|
|
|
|
return () => {
|
|
window.removeEventListener('wheel', handleScroll)
|
|
window.removeEventListener('keydown', handleKey)
|
|
}
|
|
}, [current, nextSlide, prevSlide])
|
|
|
|
|
|
return (
|
|
<main className="relative h-screen w-screen overflow-hidden">
|
|
{slides.map((slide, idx) => (
|
|
<Slide key={idx} index={idx} currentSlide={current}>
|
|
{slide}
|
|
</Slide>
|
|
))}
|
|
<div className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white ${current === slides.length - 1 ? 'hidden' : ''}`}>
|
|
<ChevronDoubleDownIcon className="w-12 h-12 animate-bounce cursor-pointer" onClick={nextSlide} />
|
|
</div>
|
|
</main>
|
|
)
|
|
} |