Metrics Card - Copy this React, Tailwind Component to your project

import-React-from-'react';-import-{-Users,-Target,-TrendingUp,-Activity,-BarChart2,-LineChart,-DollarSign,-Clock,-}-from-'lucide-react';-const-METRICS_DATA-=-{-ACQUISITION:-{-icon:-Users,-color:-'text-blue-600',-title:-'Acquisition',-subsections:-[-{-title:-'Campaign-Effectiveness',-icon:-Target-},-{-title:-'Marketing-Performance',-icon:-TrendingUp-},-{-title:-'Technical-Acquisition',-icon:-Users-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-ENGAGEMENT:-{-icon:-Activity,-color:-'text-purple-600',-title:-'Engagement',-subsections:-[-{-title:-'Gameplay-Patterns',-icon:-LineChart-},-{-title:-'Social-Engagement',-icon:-Users-},-{-title:-'Event-Engagement',-icon:-Target-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-MONETIZATION:-{-icon:-DollarSign,-color:-'text-yellow-600',-title:-'Monetization',-subsections:-[-{-title:-'Spending-Patterns',-icon:-LineChart-},-{-title:-'Conversion-Analysis',-icon:-Target-},-{-title:-'Revenue-Optimization',-icon:-TrendingUp-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-RETENTION:-{-icon:-Clock,-color:-'text-green-600',-title:-'Retention',-subsections:-[-{-title:-'Retention-Metrics',-icon:-LineChart-},-{-title:-'Churn-Analysis',-icon:-BarChart2-},-{-title:-'Cohort-Analysis',-icon:-Users-},-{-title:-'Cohort-Performance',-icon:-Target-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-}-};-const-ICON_MAP-=-{-Users,-Target,-TrendingUp,-Activity,-BarChart2,-LineChart,-DollarSign,-Clock,-};-export-const-MetricInsights-=-({-metricsData,-downloadStats-})-=>-{-//-Transform-incoming-data-if-needed-const-processedData-=-React.useMemo(()-=>-{-if-(!metricsData-||-Object.keys(metricsData).length-===-0)-{-return-METRICS_DATA;-}-//-If-the-data-is-already-in-the-correct-format,-return-it-if-(metricsData.ACQUISITION?.subsections)-{-return-metricsData;-}-//-Transform-the-data-into-the-expected-format-const-transformedData-=-{};-Object.entries(metricsData).forEach(([key,-value])-=>-{-if-(!value?.sections)-return;-const-category-=-key.toUpperCase();-transformedData[category]-=-{-icon:-ICON_MAP[value.icon]-||-Activity,-color:-value.color-||-'text-gray-600',-title:-value.category-||-key,-subsections:-value.sections.map(section-=>-({-title:-section.title,-icon:-ICON_MAP[section.icon]-||-Activity,-details:-section.details-}))-};-});-return-Object.keys(transformedData).length->-0-?-transformedData-:-METRICS_DATA;-},-[metricsData]);-const-renderSubsection-=-({-title,-icon:-Icon,-details-})-=>-(-<div-key={title}-className="flex-items-center-space-x-2-p-2-hover:bg-gray-50-rounded-md-m-10-thisMargin">-{Icon-&&-<Icon-className="w-4-h-4-text-gray-600"-/>}-<div-className="m-20">-<span-className="text-sm-text-gray-700">"HIII"</span>-{details-&&-details.length->-0-&&-(-<ul-className="mt-1-ml-6-text-xs-text-gray-500">-{details.map((detail,-idx)-=>-(-<li-key={idx}>{detail}</li>-))}-</ul>-)}-</div>-</div>-);-const-renderSection-=-([key,-section])-=>-{-if-(!section)-return-null;-const-MainIcon-=-section.icon-||-Activity;-return-(-<div-key={key}-className="bg-white-rounded-lg-shadow-sm-p-6">-<div-className="flex-items-center-space-x-3-mb-4">-<MainIcon-className={`w-6-h-6-${section.color-||-'text-gray-600'}`}-/>-<h3-className="text-xl-font-bold-text-gray-900">{section.title-||-key}</h3>-</div>-<div-className="grid-grid-cols-1-md:grid-cols-2-gap-2">-{section.subsections?.map(renderSubsection)}-</div>-</div>-);-};-return-(-<div-className="space-y-6">-{Object.entries(processedData-||-{}).map(renderSection)}-{downloadStats-&&-(-<div-className="mt-4-text-sm-text-gray-600">-<p>Successfully-loaded:-{downloadStats.successCount}-files</p>-{downloadStats.failureCount->-0-&&-(-<p-className="text-red-600">-Failed-to-load:-{downloadStats.failureCount}-files-</p>-)}-</div>-)}-</div>-);-};-export-default-MetricInsights;-i-want-to-make-it-asthetic-import-React-from-'react';-import-{-Users,-Target,-TrendingUp,-Activity,-BarChart2,-LineChart,-DollarSign,-Clock,-}-from-'lucide-react';-const-METRICS_DATA-=-{-ACQUISITION:-{-icon:-Users,-color:-'text-blue-600',-title:-'Acquisition',-subsections:-[-{-title:-'Campaign-Effectiveness',-icon:-Target-},-{-title:-'Marketing-Performance',-icon:-TrendingUp-},-{-title:-'Technical-Acquisition',-icon:-Users-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-ENGAGEMENT:-{-icon:-Activity,-color:-'text-purple-600',-title:-'Engagement',-subsections:-[-{-title:-'Gameplay-Patterns',-icon:-LineChart-},-{-title:-'Social-Engagement',-icon:-Users-},-{-title:-'Event-Engagement',-icon:-Target-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-MONETIZATION:-{-icon:-DollarSign,-color:-'text-yellow-600',-title:-'Monetization',-subsections:-[-{-title:-'Spending-Patterns',-icon:-LineChart-},-{-title:-'Conversion-Analysis',-icon:-Target-},-{-title:-'Revenue-Optimization',-icon:-TrendingUp-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-},-RETENTION:-{-icon:-Clock,-color:-'text-green-600',-title:-'Retention',-subsections:-[-{-title:-'Retention-Metrics',-icon:-LineChart-},-{-title:-'Churn-Analysis',-icon:-BarChart2-},-{-title:-'Cohort-Analysis',-icon:-Users-},-{-title:-'Cohort-Performance',-icon:-Target-},-{-title:-'Recommendations',-icon:-Activity-},-{-title:-'Executive-Summary',-icon:-BarChart2-},-]-}-};-const-ICON_MAP-=-{-Users,-Target,-TrendingUp,-Activity,-BarChart2,-LineChart,-DollarSign,-Clock,-};-export-const-MetricInsights-=-({-metricsData,-downloadStats-})-=>-{-//-Transform-incoming-data-if-needed-const-processedData-=-React.useMemo(()-=>-{-if-(!metricsData-||-Object.keys(metricsData).length-===-0)-{-return-METRICS_DATA;-}-//-If-the-data-is-already-in-the-correct-format,-return-it-if-(metricsData.ACQUISITION?.subsections)-{-return-metricsData;-}-//-Transform-the-data-into-the-expected-format-const-transformedData-=-{};-Object.entries(metricsData).forEach(([key,-value])-=>-{-if-(!value?.sections)-return;-const-category-=-key.toUpperCase();-transformedData[category]-=-{-icon:-ICON_MAP[value.icon]-||-Activity,-color:-value.color-||-'text-gray-600',-title:-value.category-||-key,-subsections:-value.sections.map(section-=>-({-title:-section.title,-icon:-ICON_MAP[section.icon]-||-Activity,-details:-section.details-}))-};-});-return-Object.keys(transformedData).length->-0-?-transformedData-:-METRICS_DATA;-},-[metricsData]);-const-renderSubsection-=-({-title,-icon:-Icon,-details-})-=>-(-<div-key={title}-className="flex-items-center-space-x-2-p-2-hover:bg-gray-50-rounded-md-m-10-thisMargin">-{Icon-&&-<Icon-className="w-4-h-4-text-gray-600"-/>}-<div-className="m-20">-<span-className="text-sm-text-gray-700">"HIII"</span>-{details-&&-details.length->-0-&&-(-<ul-className="mt-1-ml-6-text-xs-text-gray-500">-{details.map((detail,-idx)-=>-(-<li-key={idx}>{detail}</li>-))}-</ul>-)}-</div>-</div>-);-const-renderSection-=-([key,-section])-=>-{-if-(!section)-return-null;-const-MainIcon-=-section.icon-||-Activity;-return-(-<div-key={key}-className="bg-white-rounded-lg-shadow-sm-p-6">-<div-className="flex-items-center-space-x-3-mb-4">-<MainIcon-className={`w-6-h-6-${section.color-||-'text-gray-600'}`}-/>-<h3-className="text-xl-font-bold-text-gray-900">{section.title-||-key}</h3>-</div>-<div-className="grid-grid-cols-1-md:grid-cols-2-gap-2">-{section.subsections?.map(renderSubsection)}-</div>-</div>-);-};-return-(-<div-className="space-y-6">-{Object.entries(processedData-||-{}).map(renderSection)}-{downloadStats-&&-(-<div-className="mt-4-text-sm-text-gray-600">-<p>Successfully-loaded:-{downloadStats.successCount}-files</p>-{downloadStats.failureCount->-0-&&-(-<p-className="text-red-600">-Failed-to-load:-{downloadStats.failureCount}-files-</p>-)}-</div>-)}-</div>-);-};-export-default-MetricInsights;