Ribbons

import { useState, useEffect, FC } from 'react';

import { Ribbons } from "@/components/ui/ribbons"; 

const DemoOne: FC = () => {
  const [isDarkMode, setIsDarkMode] = useState(true); 
  const [keyForRibbons, setKeyForRibbons] = useState(0); 

  useEffect(() => {
   
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      const darkMode = mediaQuery.matches;
      setIsDarkMode(darkMode);
      document.documentElement.classList.toggle('dark', darkMode);
    };
    handleChange(); 
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

 
  const baseThicknessValue: number = 30;
  const ribbonColorsArray: string[] = ['#ffffff']; 
  
  const speedMultiplierValue: number = 0.5;
  const maxAgeValue: number = 500;
  const fadeEnabled: boolean = false;
  const shaderEffectEnabled: boolean = true;

  
  const ribbonCanvasBackgroundColor: [number, number, number, number] = [0, 0, 0, 0]; 

  

  return (
    <div className={`flex flex-col w-full min-h-screen justify-center items-center 
                   p-4
                   ${isDarkMode ? 'bg-black' : 'bg-white'} 
                   transition-colors duration-300`}>
      
      
      <div 
        style={{ 
          width: 'clamp(300px, 80vmin, 700px)', 
          height: '500px',                     
          position: 'relative', 
          overflow: 'hidden'                   
        }}
        className="border-2 border-neutral-700 dark:border-neutral-300 rounded-lg shadow-xl 
                   bg-neutral-800 dark:bg-neutral-200" 
      >
        <Ribbons
          key={keyForRibbons} 
          baseThickness={baseThicknessValue}
          colors={ribbonColorsArray} 
          speedMultiplier={speedMultiplierValue}
          maxAge={maxAgeValue}
          enableFade={fadeEnabled}
          enableShaderEffect={shaderEffectEnabled}
          backgroundColor={ribbonCanvasBackgroundColor} // 
        />
      </div>
      
       <p className={`text-center text-sm mt-6 ${isDarkMode ? 'text-neutral-400' : 'text-neutral-600'}`}>
        Move your mouse over the area above.
      </p>
    </div>
  );
};

export { DemoOne };