Heat Map XL

Cards 95

About

Here is heat map xl sized

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Heat Map XL to your project and fits it to your theme.

Code

How Heat Map XL is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import IncidentHeatmapReportCard from '@/components/ui/heat-map-xl';

function IncidentHeatmapReportCardDemo() {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  const toggleDarkMode = () => {
    setIsDarkMode(prevMode => {
      const newMode = !prevMode;
      if (newMode) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
      return newMode;
    });
  };

  React.useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e: MediaQueryListEvent) => {
      setIsDarkMode(e.matches);
      if (e.matches) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    };

    setIsDarkMode(mediaQuery.matches);
    if (mediaQuery.matches) {
      document.documentElement.classList.add('dark');
    }
    
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
      <button 
        onClick={toggleDarkMode} 
        aria-pressed={isDarkMode}
        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
      >
        Toggle Dark Mode ({isDarkMode ? 'On' : 'Off'})
      </button>
      <IncidentHeatmapReportCard />
    </div>
  );
}

export default IncidentHeatmapReportCardDemo;