1. import Sidenav from './../SideNav/Sidenav';
2. import Uppernav from './../Courses/Uppernav';
3. import Footer from '../LandingPage/Footer/Footer';
4. import Math from "../../assets/images/Math.png";
5. import Chemistry from "../../assets/images/chem.png";
6. import Physics from "../../assets/images/phy.png";
7. import ICT from "../../assets/images/ICT.png";
8. import English from "../../assets/images/Eng.png";
9. import ss from "../../assets/images/ss.png";
10. import fac1 from "../../assets/images/fac1.png";
11. import fac2 from "../../assets/images/fac2.png";
12. import fac3 from "../../assets/images/fac3.png";
13. import fac4 from "../../assets/images/fac4.png";
14. import fac5 from "../../assets/images/fac5.png";
15. import fac6 from "../../assets/images/fac6.png";
16. import { RiArrowLeftDoubleFill, RiArrowRightDoubleLine } from "react-icons/ri";
17. import { motion } from 'framer-motion';
18. import React, { useState } from 'react';
19. import { Link } from 'react-router-dom';
20.  
21. const courseCards = [
22.   { imageUrl: Math, circularImageUrl: fac1, title: 'Maths' },
23.   { imageUrl: Chemistry, circularImageUrl: fac2, title: 'Chemistry' },
24.   { imageUrl: Physics, circularImageUrl: fac3, title: 'Physics' },
25.   { imageUrl: ICT, circularImageUrl: fac4, title: 'ICT' },
26.   { imageUrl: English, circularImageUrl: fac5, title: 'English' },
27.   { imageUrl: ss, circularImageUrl: fac6, title: 'Social Science' }
28. ];
29.  
30. const CourseCard = ({ card }) => (
31.   <motion.div
32.     key={card.title}
33.     initial={{ opacity: 0, y: 50 }}
34.     animate={{ opacity: 1, y: 0 }}
35.     exit={{ opacity: 0, y: -50 }}
36.      transiti duration: 0.5 }}
37.     className="w-80 bg-white rounded-lg shadow-lg overflow-hidden hover:scale-105 hover:shadow-2xl transition-all duration-300"
38.   >
39.     <div className="h-36 bg-gray-300 relative rounded-bl-30p rounded-br-30p">
40.       <img
41.        
42.         alt="Card Image"
43.         className="h-full w-full object-cover rounded-t-lg rounded-bl-lg rounded-br-lg" />
44.       <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-16 ml-28">
45.         <img
46.          
47.           alt="Circular Image"
48.           className="rounded-full w-13 h-13" />
49.       </div>
50.     </div>
51.     <div className="p-3">
52.       <h2 className="text-xl font-bold mb-2 top-4 no-underline">{card.title}</h2>
53.     </div>
54.   </motion.div>
55. );
56.  
57. const CourseSlider = ({ title }) => {
58.   const [currentIndex, setCurrentIndex] = useState(0);
59.  
60.   const handlePrevious = () => {
61.     setCurrentIndex((currentIndex - 1 + courseCards.length) % courseCards.length);
62.   };
63.  
64.   const handleNext = () => {
65.     setCurrentIndex((currentIndex + 1) % courseCards.length);
66.   };
67.  
68.   const renderIndices = { 0: 0, 1: 1, 2: 2 };
69.  
70.   return (
71.     <motion.div
72.       initial={{ opacity: 0 }}
73.       animate={{ opacity: 1 }}
74.       exit={{ opacity: 0 }}
75.        transiti duration: 0.5 }}
76.       className="bg-white h-40vh w-50vw rounded-xl ml-6 mt-[-4] pb-10"
77.     >
78.       <div className='flex space-x-96 mt-6'>
79.         <div className='flex space-x-36 pl-8'>
80.           <span className='font-semibold text-xl'>{title}</span>
81.         </div>
82.       </div>
83.       <div className="flex justify-center mt-10 relative">
84.         <RiArrowLeftDoubleFill
85.           className="absolute left-0 pt-16 text-gray-600 hover:text-gray-800 cursor-pointer"
86.            
87.           size={50}
88.         />
89.         <div className="flex space-x-12">
90.           {Object.keys(renderIndices).map((key) => (
91.             <Link to="/courses-details" key={key} className=' no-underline'>
92.               <CourseCard card={courseCards[(currentIndex + renderIndices[key]) % courseCards.length]} />
93.             </Link>
94.           ))}
95.         </div>
96.         <RiArrowRightDoubleLine
97.           className="absolute right-0 pt-16 text-gray-600 hover:text-gray-800 cursor-pointer"
98.            
99.           size={50}
100.         />
101.       </div>
102.     </motion.div>
103.   );
104. };
105.  
106. function Courselist() {
107.   return (
108.     <div className='bg-opacity-100 bg-gray-200 h-screen'>
109.       <div className='flex'>
110.         <div className='flex h-screen'>
111.           <Sidenav />
112.         </div>
113.         <div className='flex flex-col w-full pr-2'>
114.           <div className='p-6'>
115.             <Uppernav />
116.           </div>
117.           <CourseSlider title="My Courses" />
118.           <CourseSlider title="Popular Courses" />
119.         </div>
120.       </div>
121.       <Footer className='pt-7' />
122.     </div>
123.   );
124. }
125.  
126. export default Courselist;