Delete Swipercomponent.js

Swipercomponent.js

@@ -1,65 +0,0 @@
-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}
-                modules={[EffectCoverflow, Pagination]}
-                className="swiper"
-            >
-                {avatars.map((avatar, index) => (
-                    <SwiperSlide key={index} onClick={() => handleSelect(avatar)}>
-                        <img src={avatar.image} alt={avatar.name} className="avatar-image" />
-                        <div className="avatar-info">
-                            <h3>{avatar.name}</h3>
-                            <p>{avatar.description}</p>
-                            <em>"{avatar.sample}"</em>
-                        </div>
-                    </SwiperSlide>
-                ))}
-            </Swiper>
-        </div>
-    );
-}
-
-export default SwiperComponent;