Create Swipercomponent.js

Swipercomponent.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import { EffectCoverflow, Pagination } from "swiper/modules";
+import "./Swipercomponent.css"; // Ensure you create a corresponding CSS file
+
+const avatars = [
+    { name: "Rat", image: "images/rat.png", description: "Clever and resourceful. Loves puzzles and word games.", sample: "Let's solve a riddle together!" },
+    { name: "Ox", image: "images/ox.png", description: "Strong and dependable. Very patient when explaining concepts.", sample: "I will guide you step by step." },
+    { name: "Tiger", image: "images/tiger.png", description: "Brave and energetic. Loves exciting challenges.", sample: "Let's make learning an adventure!" },
+    { name: "Rabbit", image: "images/rabbit.png", description: "Gentle and kind. Encourages learning through storytelling.", sample: "I have a story to share with you!" },
+    { name: "Dragon", image: "images/dragon.png", description: "Confident and intelligent. Explains ideas clearly.", sample: "I will help you think like a scholar!" },
+    { name: "Snake", image: "images/snake.png", description: "Calm and analytical. Gives insightful explanations.", sample: "Let's break this down logically!" },
+    { name: "Horse", image: "images/horse.png", description: "Cheerful and enthusiastic. Encourages active participation.", sample: "Come on, let's say it together!" },
+    { name: "Goat", image: "images/sheep.png", description: "Creative and friendly. Uses fun examples.", sample: "Let's use pictures to understand this!" },
+    { name: "Monkey", image: "images/monkey.png", description: "Smart and playful. Makes learning fun.", sample: "I love word games! Do you?" },
+    { name: "Rooster", image: "images/rooster.png", description: "Confident and vocal. Encourages clear pronunciation.", sample: "Let's practice speaking clearly!" },
+    { name: "Dog", image: "images/dog.png", description: "Loyal and encouraging. Builds confidence in learners.", sample: "You're doing a great job!" },
+    { name: "Pig", image: "images/pig.png", description: "Easygoing and kind. Makes learning feel natural.", sample: "Let's take it step by step together!" }
+];
+
+function SwiperComponent({ onSelectAvatar }) {
+    const [selected, setSelected] = useState(avatars[0]); // Default to the first avatar
+
+    const handleSelect = (avatar) => {
+        setSelected(avatar);
+        onSelectAvatar(avatar);
+    };
+
+    return (
+        <div className="swiper-container">
+            <Swiper
+                effect={"coverflow"}
+                grabCursor={true}
+                centeredSlides={true}
+                slidesPerView={"auto"}
+                coverflowEffect={{
+                    rotate: 0,
+                    stretch: 0,
+                    depth: 100,
+                    modifier: 2.5,
+                    slideShadows: false,
+                }}
+                pagination={true}
+