import React, { useState } from 'react'; import { TrendingUp, TrendingDown } from 'lucide-react'; // Customizable constants const sectionTitle = "Market"; const sectionTitle2 = "Pulse"; const sectionDescription = "Stay ahead of the curve with our real-time sentiment analysis, powered by advanced AI algorithms and market data."; const chartTitle = "Crypto Sentiment"; const chartTitle2 = "Analysis"; const sentimentAnalysisDescription = "Sentiment analysis based on social media trends, news articles, and market indicators."; const sentimentData: SentimentData[] = [ { coin: 'BTC', sentiment: 78, change: 5.2 }, { coin: 'ETH', sentiment: 82, change: 7.8 }, { coin: 'ADA', sentiment: 65, change: -2.1 }, { coin: 'DOT', sentiment: 71, change: 3.4 }, { coin: 'XRP', sentiment: 59, change: -4.6 }, ]; // Interface defining the structure of the sentiment data interface SentimentData { coin: string; sentiment: number; change: number; } // Main component to display the crypto sentiment section const UnifiedCryptoSentimentSection: React.FC = () => { const [hoveredIndex, setHoveredIndex] = useState(null); return (

{/* Animated background elements */}

{/* Grid overlay */}

{/* Title */}

{sectionTitle} {sectionTitle2}

{/* Description */}

{sectionDescription}

{/* Sentiment Chart */}

{chartTitle} {chartTitle2}

{sentimentData.map((item, index) => (

setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} >

{item.coin} {item.sentiment}%

= 0 ? 'text-green-400' : 'text-red-400'}`}> {item.change >= 0 ? : } {Math.abs(item.change)}%

))}

{sentimentAnalysisDescription}

); }; export default UnifiedCryptoSentimentSection;

Charts Components

Glass Sentiment Charts