Fashion Recommender - Copy this React, Tailwind Component to your project

import React, { useState, useEffect, useRef } from "react"; import { HexColorPicker } from "react-colorful"; import { FaRandom, FaInfoCircle, FaCheck, FaPalette, FaMagic, FaCamera, FaUpload, FaGem, FaUser } from "react-icons/fa"; import { TooltipComponent } from "@syncfusion/ej2-react-popups"; const ColorSuggestionTool = () => { const [selectedColor, setSelectedColor] = useState("#663399"); const [harmonyColors, setHarmonyColors] = useState([]); const [selectedEvent, setSelectedEvent] = useState("work"); const [harmonyType, setHarmonyType] = useState("complementary"); const [uploadedImage, setUploadedImage] = useState(null); const [selectedBodyType, setSelectedBodyType] = useState("hourglass"); const [selectedSkinType, setSelectedSkinType] = useState("fair"); const fileInputRef = useRef(null); const events = [ { id: "work", name: "Official Work", colors: ["#1B4F72", "#2E86C1", "#AED6F1"], suggestions: ["Formal suit", "Business casual", "Professional attire"] }, { id: "wedding", name: "Wedding", colors: ["#FFD1DC", "#FFFFFF", "#DCD0FF"], suggestions: ["Traditional wear", "Evening gown", "Formal suit"] }, { id: "festive", name: "Festive", colors: ["#FF0000", "#00FF00", "#FFD700"], suggestions: ["Bright colors", "Traditional patterns", "Festive wear"] }, { id: "casual", name: "Casual", colors: ["#E6F3FF", "#B2D8D8", "#66B2B2"], suggestions: ["Comfortable wear", "Relaxed fit", "Everyday style"] } ]; const bodyTypes = [ { id: "hourglass", name: "Hourglass", recommendations: ["A-line dresses", "Fitted tops", "High-waisted bottoms"] }, { id: "pear", name: "Pear", recommendations: ["Boot cut pants", "A-line skirts", "Structured shoulders"] }, { id: "apple", name: "Apple", recommendations: ["Empire waist tops", "Straight-leg pants", "V-neck tops"] }, { id: "rectangle", name: "Rectangle", recommendations: ["Ruffled tops", "Belt at waist", "Layered pieces"] }, { id: "inverted-triangle", name: "Inverted Triangle", recommendations: ["Full skirts", "Wide-leg pants", "Detailed bottoms"] } ]; const skinTypes = [ { id: "fair", name: "Fair", colors: ["#FFB6C1", "#87CEEB", "#E6E6FA"] }, { id: "medium", name: "Medium", colors: ["#CD853F", "#DAA520", "#D2691E"] }, { id: "olive", name: "Olive", colors: ["#556B2F", "#8FBC8F", "#6B8E23"] }, { id: "dark", name: "Dark", colors: ["#800000", "#4B0082", "#191970"] } ]; const harmonyTypes = [ { id: "complementary", name: "Complementary" }, { id: "analogous", name: "Analogous" }, { id: "triadic", name: "Triadic" }, { id: "monochromatic", name: "Monochromatic" }, { id: "splitComplementary", name: "Split Complementary" }, { id: "tetradic", name: "Tetradic" } ]; const handleImageUpload = (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setUploadedImage(reader.result); }; reader.readAsDataURL(file); } }; const generateHarmonyColors = () => { const hex = selectedColor.replace("#", ""); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4,