Flying Posters

import React, { useState, useEffect } from 'react';
import { FlyingPosters } from "@/components/ui/flying-posters";

const items = [
  'https://picsum.photos/id/1018/500/500?grayscale',
  'https://picsum.photos/id/1015/600/600?grayscale',
  'https://picsum.photos/id/1016/400/400?grayscale',
  'https://picsum.photos/id/1019/500/500?grayscale',
  'https://picsum.photos/id/1020/600/600?grayscale',
  'https://picsum.photos/id/1021/400/400?grayscale',
];

const FlyingPostersDemo = () => {
  const [isDark, setIsDark] = useState(true);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDark]);

  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <div className="relative flex w-full min-h-screen justify-center items-center bg-black dark:bg-white overflow-hidden">
      <div className="absolute top-4 right-4">
        <button
          onClick={toggleTheme}
          className="p-2 rounded-full border border-gray-700 dark:border-gray-300 bg-gray-900 dark:bg-gray-100 text-white dark:text-black"
        >

        </button>
      </div>
      
      <div className="absolute inset-0">
        <FlyingPosters items={items} />
      </div>
      
      <div className="relative z-10 text-[var(--text-color)] text-7xl font-bold select-none ">
        Scroll. 
      </div>

      <style jsx>{`
        .FlyingPostersDemo {
          --text-color: hsl(0 0% 70%);
        }
        html.dark .FlyingPostersDemo {
          --text-color: hsl(0 0% 70%);
        }
        html:not(.dark) .FlyingPostersDemo {
          --text-color: hsl(0 0% 30%);
        }
      `}</style>
    </div>
  );
};

export { FlyingPostersDemo };