File size: 2,840 Bytes
a566fb0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { ChevronLeft, ChevronRight, Home } from 'lucide-react';
export default function SlideNavigation({
currentSlide,
totalSlides,
onPrev,
onNext,
onHome,
chapterTitle
}) {
return (
<div className="fixed bottom-0 left-0 right-0 z-50">
<div className="bg-slate-900/90 backdrop-blur-xl border-t border-white/10">
<div className="max-w-4xl mx-auto px-6 py-4">
<div className="flex items-center justify-between gap-4">
{/* Progress Dots */}
<div className="hidden sm:flex items-center gap-2">
{Array.from({ length: totalSlides }).map((_, i) => (
<motion.div
key={i}
className={`h-2 rounded-full transition-all duration-300 ${
i === currentSlide
? 'w-8 bg-gradient-to-r from-cyan-400 to-purple-400'
: i < currentSlide
? 'w-2 bg-white/50'
: 'w-2 bg-white/20'
}`}
initial={false}
animate={{ scale: i === currentSlide ? 1.1 : 1 }}
/>
))}
</div>
{/* Slide Counter (Mobile) */}
<div className="sm:hidden text-white/70 font-medium">
{currentSlide + 1} / {totalSlides}
</div>
{/* Navigation Buttons */}
<div className="flex items-center gap-3">
<Button
size="icon"
onClick={onHome}
className="text-white/70 hover:text-white bg-white/5 hover:bg-white/10 rounded-xl border-0"
>
<Home className="w-5 h-5" />
</Button>
<Button
onClick={onPrev}
disabled={currentSlide === 0}
className="border-2 border-white/20 text-white bg-white/5 hover:bg-white/10 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed font-semibold"
>
<ChevronLeft className="w-5 h-5 mr-1" />
Back
</Button>
<Button
onClick={onNext}
disabled={currentSlide === totalSlides - 1}
className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-xl disabled:opacity-30 disabled:cursor-not-allowed text-white font-bold border-0 shadow-lg"
>
Next
<ChevronRight className="w-5 h-5 ml-1" />
</Button>
</div>
</div>
</div>
</div>
</div>
);
} |