Componente Mappe di calore
Un componente Heat Maps reattivo con stile Glassmorphism, combinazione di colori analoga e complessità moderata per un portfolio, con supporto per temi scuri.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition-all duration-300">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Activity Heatmap</h2>
<div class="grid grid-cols-7 gap-1 text-center text-sm text-gray-600 dark:text-gray-300 mb-2">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
</div>
<div class="grid grid-cols-7 gap-1">
<!-- Loop for weeks -->
{[...Array(4)].map((_, weekIndex) => (
// Loop for days
[...Array(7)].map((_, dayIndex) => {
const intensity = Math.floor(Math.random() * 5); // 0-4 for intensity
const colors = [
"bg-purple-200 dark:bg-purple-800",
"bg-purple-300 dark:bg-purple-700",
"bg-purple-400 dark:bg-purple-600",
"bg-purple-500 dark:bg-purple-500",
"bg-purple-600 dark:bg-purple-400"
];
return (
<div
key={`${weekIndex}-${dayIndex}`}
class={`h-8 w-full rounded-sm ${colors[intensity]} transform hover:scale-105 transition-transform duration-200 cursor-pointer`}
title={`Day ${dayIndex + 1}, Week ${weekIndex + 1}: Intensity ${intensity}`}
></div>
);
})
))}
</div>
<div class="flex justify-between items-center mt-6 text-gray-600 dark:text-gray-300 text-sm">
<span>Less</span>
<div class="flex space-x-1">
<div class="h-4 w-4 bg-purple-200 dark:bg-purple-800 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-300 dark:bg-purple-700 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-400 dark:bg-purple-600 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-500 dark:bg-purple-500 rounded-sm"></div>
<div class="h-4 w-4 bg-purple-600 dark:bg-purple-400 rounded-sm"></div>
</div>
<span>More</span>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Mappe di calore
Un componente reattivo per le mappe di calore progettato con un'estetica retrò/vintage, che incorpora il supporto per i temi scuri. Presenta sezioni per un titolo, un sottotitolo e una mappa con aree evidenziate termicamente, con immagini casuali e avatar aggiuntivi per un look nostalgico.
Mappe di calore Componente 42
Un componente di mappa di calore reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, che supporta la modalità oscura e presenta immagini e avatar casuali.
Componente Mappe di calore
Un componente per mappe termiche reattivo per applicazioni manifatturiere/industriali, caratterizzato da un design ispirato alla carta/stampa e una combinazione di colori oceano/blu. Include il supporto per la modalità oscura e l'HTML semantico.