import React, { useState, useEffect } from 'react';
import { FlowingMenu } from "@/components/ui/flowing-menu";
const demoItems = [
{ link: '#mojave', text: 'Mojave', image: 'https://cdn.21st.dev/assets/mirror/3e/3e7b43f21605763d293748f12efd49900b2be79b63a084bec6b03d17c6174c07.jpg' },
{ link: '#sonoma', text: 'Sonoma', image: 'https://cdn.21st.dev/assets/mirror/b0/b0ff23abce0eeaed39ae25f0c0d64975e106a34b95bdedca331e6386e2149d93.jpg' },
{ link: '#monterey', text: 'Monterey', image: 'https://cdn.21st.dev/assets/mirror/fb/fb2cd1799bcc53da7a26d959f41db367df36b5d2a69343fe8923964b87fc283e.jpg' },
{ link: '#sequoia', text: 'Sequoia', image: 'https://cdn.21st.dev/assets/mirror/39/39689c4e1550da31672252339c548f7312906a1507bae928bf61aa86cb2b736c.jpg' }
];
const FlowingMenuDemo = () => {
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
if (isDarkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [isDarkMode]);
return (
<>
<style jsx global>{`
@keyframes marqueeScroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.animate-marquee {
animation: marqueeScroll 25s linear infinite;
}
`}</style>
<div className="flex flex-col w-full min-h-screen justify-center items-center bg-gray-100 dark:bg-neutral-900 p-4 transition-colors duration-300">
<div
className="relative shadow-xl rounded-lg overflow-hidden"
style={{ height: '600px', width: '100%', maxWidth: '450px' }}
>
<FlowingMenu items={demoItems} />
</div>
</div>
</>
);
};
export { FlowingMenuDemo };
