|
1 | | -import { useState } from 'react'; |
2 | | -import { motion } from 'framer-motion'; |
| 1 | +import 'react-responsive-carousel'; |
| 2 | +import { Carousel } from 'react-responsive-carousel'; |
3 | 3 | import { ArrowLeft, ArrowRight } from 'lucide-react'; |
4 | 4 | import { steps } from '@/constants/TryNowData/bootableSoasData'; |
| 5 | +import { useState } from 'react'; |
5 | 6 |
|
6 | 7 | const StepsToUse = () => { |
7 | | - const [activeStep, setActiveStep] = useState(0); |
8 | | - |
9 | | - const nextStep = () => |
10 | | - setActiveStep((prev) => Math.min(prev + 1, steps.length - 1)); |
11 | | - const prevStep = () => setActiveStep((prev) => Math.max(prev - 1, 0)); |
| 8 | + const [currentStep, setCurrentStep] = useState(0); |
12 | 9 |
|
13 | 10 | return ( |
14 | 11 | <section className="w-[90%] mx-auto py-8"> |
15 | 12 | <h2 className="text-3xl font-bold text-center text-black mb-6"> |
16 | 13 | Steps to Boot Sugar on a Stick |
17 | 14 | </h2> |
18 | 15 |
|
19 | | - {/* Carousel Container */} |
20 | | - <div className="relative flex items-center justify-center"> |
21 | | - {/* Left Arrow */} |
22 | | - <button |
23 | | - className={`absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition ${ |
24 | | - activeStep === 0 |
25 | | - ? 'opacity-50 cursor-not-allowed' |
26 | | - : 'hover:bg-gray-400' |
27 | | - }`} |
28 | | - onClick={prevStep} |
29 | | - disabled={activeStep === 0} |
30 | | - > |
31 | | - <ArrowLeft size={30} /> |
32 | | - </button> |
33 | | - |
34 | | - {/* Step Content */} |
35 | | - <motion.div |
36 | | - key={activeStep} |
37 | | - initial={{ opacity: 0, x: 50 }} |
38 | | - animate={{ opacity: 1, x: 0 }} |
39 | | - exit={{ opacity: 0, x: -50 }} |
40 | | - transition={{ duration: 0.3 }} |
41 | | - className="w-full sm:w-[80%] md:w-[70%] lg:w-[60%] text-center" |
| 16 | + <div className="relative w-full sm:w-[80%] md:w-[70%] lg:w-[60%] mx-auto"> |
| 17 | + <Carousel |
| 18 | + selectedItem={currentStep} |
| 19 | + onChange={(index) => setCurrentStep(index)} |
| 20 | + showArrows={false} |
| 21 | + showThumbs={false} |
| 22 | + showStatus={false} |
| 23 | + showIndicators={true} |
| 24 | + useKeyboardArrows |
| 25 | + infiniteLoop |
42 | 26 | > |
43 | | - {/* Step Number */} |
44 | | - <div className="text-lg font-semibold text-gray-600"> |
45 | | - Step {activeStep + 1} |
46 | | - </div> |
| 27 | + {steps.map((step, index) => ( |
| 28 | + <div key={index} className="text-center relative"> |
| 29 | + {index > 0 && ( |
| 30 | + <button |
| 31 | + className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition hover:bg-gray-400" |
| 32 | + onClick={() => setCurrentStep(currentStep - 1)} |
| 33 | + > |
| 34 | + <ArrowLeft size={30} /> |
| 35 | + </button> |
| 36 | + )} |
47 | 37 |
|
48 | | - {/* Title */} |
49 | | - <h3 className="text-2xl font-semibold text-black mt-1"> |
50 | | - {steps[activeStep].title} |
51 | | - </h3> |
52 | | - |
53 | | - {/* Description */} |
54 | | - <p className="text-gray-700 mt-2">{steps[activeStep].description}</p> |
55 | | - |
56 | | - {/* Step Image */} |
57 | | - <motion.img |
58 | | - src={steps[activeStep].image} |
59 | | - alt={steps[activeStep].title} |
60 | | - className="mx-auto mt-4 rounded-lg shadow-lg w-3/4 sm:w-2/3 md:w-1/2 h-auto" |
61 | | - initial={{ scale: 0.8, opacity: 0 }} |
62 | | - animate={{ scale: 1, opacity: 1 }} |
63 | | - transition={{ duration: 0.4 }} |
64 | | - /> |
65 | | - </motion.div> |
66 | | - |
67 | | - {/* Right Arrow */} |
68 | | - <button |
69 | | - className={`absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition ${ |
70 | | - activeStep === steps.length - 1 |
71 | | - ? 'opacity-50 cursor-not-allowed' |
72 | | - : 'hover:bg-gray-400' |
73 | | - }`} |
74 | | - onClick={nextStep} |
75 | | - disabled={activeStep === steps.length - 1} |
76 | | - > |
77 | | - <ArrowRight size={30} /> |
78 | | - </button> |
79 | | - </div> |
| 38 | + <div className="text-lg font-semibold text-gray-600"> |
| 39 | + Step {index + 1} |
| 40 | + </div> |
| 41 | + <h3 className="text-2xl font-semibold text-black mt-1"> |
| 42 | + {step.title} |
| 43 | + </h3> |
| 44 | + <p className="text-gray-700 mt-2">{step.description}</p> |
| 45 | + <img |
| 46 | + src={step.image} |
| 47 | + alt={step.title} |
| 48 | + className="mx-auto mt-4 rounded-lg shadow-lg w-3/4 sm:w-2/3 md:w-1/2 h-auto" |
| 49 | + /> |
80 | 50 |
|
81 | | - {/* Navigation Dots */} |
82 | | - <div className="flex justify-center mt-6 gap-2"> |
83 | | - {steps.map((_, index) => ( |
84 | | - <button |
85 | | - key={index} |
86 | | - className={`w-3 h-3 rounded-full transition-all ${ |
87 | | - index === activeStep ? 'bg-[#FF4F00] w-5' : 'bg-gray-300' |
88 | | - }`} |
89 | | - onClick={() => setActiveStep(index)} |
90 | | - /> |
91 | | - ))} |
| 51 | + {index < steps.length - 1 && ( |
| 52 | + <button |
| 53 | + className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-300 text-black p-2 rounded-full shadow-lg transition hover:bg-gray-400" |
| 54 | + onClick={() => setCurrentStep(currentStep + 1)} |
| 55 | + > |
| 56 | + <ArrowRight size={30} /> |
| 57 | + </button> |
| 58 | + )} |
| 59 | + </div> |
| 60 | + ))} |
| 61 | + </Carousel> |
92 | 62 | </div> |
93 | 63 | </section> |
94 | 64 | ); |
|
0 commit comments