import React, { useState, useEffect } from 'react';
import { FlyingPosters } from "@/components/ui/flying-posters";
const items = [
'https://cdn.21st.dev/assets/mirror/04/048f2780cb89ba5d16f4db22a3a71e09932ae02f51b1c22f6987e51b8c2c2028.jpg',
'https://cdn.21st.dev/assets/mirror/3d/3d7146484edf4e0f7687c9347d81037b095e5c50ccb6b10f25ab73aa9bc23521.jpg',
'https://cdn.21st.dev/assets/mirror/a5/a53bdbfc25082eede421742d8dc0a2ff04dc5104ccc7ad1d1d1414719af68eb5.jpg',
'https://cdn.21st.dev/assets/mirror/a7/a7f16da87bed9d6db289949db025748c018d9c923b662df5b7a504c47244c90c.jpg',
'https://cdn.21st.dev/assets/mirror/5c/5c3f8ab1d59119648a6a00a68923141aa41da118e69a9fce69cc4509157b3754.jpg',
'https://cdn.21st.dev/assets/mirror/49/49b1ae00607f78ce369d6e849d7c8007c564c1d8f2f65115908e27e3e0e28423.jpg',
];
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 };
