Components
Loading preview...
Here is Interpolatioon Chart medium
npx shadcn@latest add https://21st.dev/r/reaviz/interpolation-chart-1import React from 'react';
import StepInterpolationFunnelReportCard from '@/components/ui/interpolation-chart-1';
function StepInterpolationFunnelReportCardDemo() {
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;
});
};
// Optional: Set initial dark mode based on system preference
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-cyan-500 text-white rounded hover:bg-cyan-600 dark:bg-cyan-700 dark:hover:bg-cyan-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-cyan-400"
>
Toggle Dark Mode ({isDarkMode ? 'On' : 'Off'})
</button>
<StepInterpolationFunnelReportCard />
</div>
);
}
export default StepInterpolationFunnelReportCardDemo;