User Dropdown - Copy this React, Tailwind Component to your project

Ajouter dans mon code : "use client"; import React, { useState } from "react"; import { FiPlus, FiEdit2, FiTrash2, FiBook, FiClock } from "react icons/fi"; import { FaRobot, FaGraduationCap, FaTimes } from "react icons/fa"; const CourseDashboard = ({ setActiveItem }) => { const [activeTab, setActiveTab] = useState("Tous"); const [courses, setCourses] = useState([ { id: 1, title: "Advanced React Development", description: "Master modern React concepts and best practices", duration: "12 semaines", difficulty: "10 cours", status: "Tous", image: "https://images.unsplash.com/photo 1633356122544 f134324a6cee", }, { id: 2, title: "UI/UX Fundamentals", description: "Learn the basics of user interface and experience design", duration: "8 semaines", difficulty: "8 cours", status: "Mon", image: "https://images.unsplash.com/photo 1581291518633 83b4ebd1d83e", }, { id: 3, title: "JavaScript Mastery", description: "Deep dive into advanced JavaScript concepts", duration: "10 semaines", difficulty: "12 cours", status: "Tous", image: "https://images.unsplash.com/photo 1627398242454 45a1465c2479", }, { id: 4, title: "Python for Data Science", description: "Explore data analysis and machine learning with Python", duration: "14 semaines", difficulty: "10 cours", status: "Tous", image: "https://images.unsplash.com/photo 1555949963 aa79dcee981d", }, ]); const [isOpen, setIsOpen] = useState(false); const filteredCourses = activeTab === "Tous" ? courses : courses.filter((course) => course.status === activeTab); const handleDeleteCourse = (id) => { setCourses(courses.filter((course) => course.id !== id)); }; const openModal = () => setIsOpen(true); const closeModal = () => setIsOpen(false); const handlePathSelection = (pathType) => { console.log(`Selected path: ${pathType}`); closeModal(); }; const CourseCard = ({ course }) => ( <div className="bg white p 4 border rounded lg shadow hover:shadow md transition all duration 300 flex flex col"> <div className="relative w full h 28 rounded lg overflow hidden mb 4"> <img src={course.image} alt={course.title} className="w full h full object cover" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1516321318423 f06f85e504b3"; }} /> </div> <h3 className="text md font semibold text gray 800 mb 2"> {course.title} </h3> <p className="text sm text gray 600 mb 3 flex grow"> {course.description} </p> <div className="flex items center justify between text xs text gray 500"> <div className="flex items center"> <FiClock className="mr 1" /> {course.duration} </div> <div className="flex items center"> <p className="mr 1">{course.difficulty}</p> </div> </div> <div className="flex justify end gap 2 mt 3"> <button className="p 2 text blue 500 hover:bg blue 50 rounded full transition colors"> <FiEdit2 size={16} /> </button> <button onClick={() => handleDeleteCourse(course.id)} className="p 2 text red 500 hover:bg red 50 rounded full transition colors" > <FiTrash2 size={16} /> </button> </div> </div> ); const CreateCourseCard = () => ( <div onClick={openModal} className="bg white p 6 border border gray 300 rounded xl shadow sm hover:shadow md transition all duration 300 flex flex col items center justify start cursor pointer w 64" > <div className="flex items center justify center h 32 w full border border gray 200 rounded lg bg gray 50"> <FiPlus className="text orange 500" size={32} /> </div> <div className="mt 4 text center"> <p className="font medium text gray 900">Créer un nouveau module</p> <p className="text gray 600 text sm mt 1"> Créer un nouveau module en partant de zéro </p> </div> </div> ); return ( <div className="min h screen bg gradient to br from gray 50 to blue 50 p 6"> <div className="max w 7xl mx auto"> {/* Header */} <div className="flex justify between items center mb 8"> <h1 className="text 3xl font bold text black font spartan"> Parcours d'apprentissage <span className="text gray 500 text lg font normal"> {" "} | Cours et formation </span> </h1> </div> {/* Tabs */} <div className="mb 8"> <div className="flex gap 4 border b border gray 200"> <button onClick={() => setActiveTab("Tous")} className={`px 4 py 2 font medium transition colors ${ activeTab === "Tous" ? "text blue 800 border b 2 border blue 800" : "text gray 500 hover:text gray 700" }`} > Tous </button> <button onClick={() => setActiveTab("Mon")} className={`px 4 py 2 font medium transition colors ${ activeTab === "Mon" ? "text blue 900 border b 2 border blue 900" : "text gray 500 hover:text gray 700" }`} > Mon </button> </div> </div> {/* Courses */} {filteredCourses.length === 0 ? ( <div className="text center py 12"> <FiBook className="mx auto text 4xl text gray 400 mb 4" /> <h3 className="text xl font medium text gray 600 mb 2"> Aucun cours {activeTab === "Tous" ? "disponible" : "personnel"} </h3> <p className="text gray 500"> {activeTab === "Tous" ? "Commencez par créer un nouveau cours" : "Ajoutez un module pour le voir ici"} </p> </div> ) : ( <div className="grid grid cols 1 sm:grid cols 2 md:grid cols 3 lg:grid cols 4 gap 6"> <CreateCourseCard /> {filteredCourses.map((course) => ( <CourseCard key={course.id} course={course} /> ))} </div> )} </div> {/* Modal */} {isOpen && ( <div className="fixed inset 0 z 50 overflow y auto"> <div className="flex items center justify center min h screen px 4 pt 4 pb 20 text center"> <div className="fixed inset 0 transition opacity" onClick={closeModal}> <div className="absolute inset 0 bg gray 500 opacity 75"></div> </div> <div className="inline block w full max w 2xl p 6 my 8 overflow hidden text left align middle transition all transform bg white shadow xl rounded 2xl z 10"> <div className="flex justify between items center mb 6"> <h2 className="text 2xl font bold text gray 900"> Choisissez un parcours </h2> <button onClick={closeModal} className="text gray 400 hover:text red 500"> <FaTimes className="h 6 w 6" /> </button> </div> <p className="text gray 600 mb 8"> Sélectionnez la manière dont vous souhaitez créer un parcours d'apprentissage </p> <div className="grid md:grid cols 2 gap 6"> {/* IA Path */} <div className="p 6 border rounded xl hover:border blue 500 cursor pointer transition all duration 300 hover:shadow lg group" > <div className="flex flex col items center text center"> <div className="p 4 bg blue 100 rounded full group hover:bg blue 200"> <FaRobot className="h 8 w 8 text [#1b4589]" /> </div> <h3 className="mt 4 text xl font semibold text gray 900"> Parcours personnalisé par l'IA </h3> <p className="mt 2 text gray 600"> Générez un parcours d'apprentissage personnalisé </p> <button onClick={() => handlePathSelection("ai")} className="mt 4 px 6 py 2 bg [#1b4589] text white rounded lg hover:bg blue 900" > Créer un parcours personnalisé </button> </div> </div> {/* Manuel Path */} <div onClick={() => handlePathSelection("manual")} className="p 6 border rounded xl hover:border green 500 cursor pointer transition all duration 300 hover:shadow lg group" > <div className="flex flex col items center text center"> <div className="p 4 bg green 100 rounded full group hover:bg green 200"> <FaGraduationCap className="h 8 w 8 text green 700" /> </div> <h3 className="mt 4 text xl font semibold text gray 900"> Créer un parcours manuellement </h3> <p className="mt 2 text gray 600"> Construisez votre parcours étape par étape </p> <button className="mt 4 px 6 py 2 bg green 600 text white rounded lg hover:bg green 700"> Créer un parcours manuel </button> </div> </div> </div> </div> </div> </div> )} </div> ); }; export default CourseDashboard; lors de clic sur le boutton Créer un parcours personnalisé une liste deroulente s affivhe pour choisiu un user