import { useState, useEffect, FC } from 'react';
import { ImageTrail } from "@/components/ui/image-trail";
const DemoOne: FC = () => {
const [isDarkMode, setIsDarkMode] = useState(true);
const [key, setKey] = useState(0);
const imageItems = [
'https://cdn.21st.dev/assets/mirror/8c/8c3c610167e9f38d85687cfb038ab6eb3fe57fc436ed8d078a77b3a04f8ab1a3.jpg',
'https://cdn.21st.dev/assets/mirror/8e/8e52a5ecf5089a402d6115b280bc14e626303689f28de9f8a14581822e2fc2ad.jpg',
'https://cdn.21st.dev/assets/mirror/82/8227676284632af798c8bbb695561e7ff6c14b4e0228beb26bc63d56389df8d8.jpg',
'https://cdn.21st.dev/assets/mirror/08/0836c1cab623a97c20f313dab5a86b1b3e0d2ffad83ca86a4d4a5ad89f0b27ca.jpg',
'https://cdn.21st.dev/assets/mirror/d0/d0a2b7faf6a15d2a3b7c39c6f888e9a18f2f0dac4426f703659024dc2105608a.jpg',
'https://cdn.21st.dev/assets/mirror/4e/4eb681846c8523851d3e562f231ae9f946582d42659e9177c0ba3a6d73e72db3.jpg',
'https://cdn.21st.dev/assets/mirror/73/732d0f138b49165c751fd6dc32487f57d62009f99fa5e9d953b39cfab391324d.jpg',
'https://picsum.photos/id/1030/300/300',
'https://cdn.21st.dev/assets/mirror/a5/a5b1dc741602ca0a4c4a418c8a128993587fb4d2d3b08612e56dc87690a58385.jpg',
'https://cdn.21st.dev/assets/mirror/ea/ea2512da4417fb7bd6e255ea77fa443aa7c98c7cf3d2f24fc7e594fdca7aed77.jpg',
'https://cdn.21st.dev/assets/mirror/78/78c43eec249238abf80697bc955408af6ac29cd42d98117ef09004d4a95bb378.jpg',
'https://cdn.21st.dev/assets/mirror/a1/a19d56800503a04af80b8799942f13e54fadd1206ed8d6a69b6a7d705b954283.jpg',
];
const [currentVariant, setCurrentVariant] = useState<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>(1);
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 handleVariantChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const newVariant = parseInt(event.target.value, 10) as (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8);
setCurrentVariant(newVariant);
setKey(prevKey => prevKey + 1);
};
const pageBgColor = isDarkMode ? "bg-black" : "bg-white";
const textColor = isDarkMode ? "text-white" : "text-black";
const selectBgColor = isDarkMode ? "bg-neutral-800" : "bg-neutral-200";
const selectBorderColor = isDarkMode ? "border-neutral-600" : "border-neutral-400";
return (
<div className={`flex flex-col w-full min-h-screen justify-center items-center
p-4 space-y-6 // Added space-y for layout
${pageBgColor} ${textColor}
transition-colors duration-300`}>
<div className="absolute top-4 right-4 z-[200] flex items-center gap-2">
<label htmlFor="variant-select" className={`text-sm font-medium ${textColor}`}>
Variant:
</label>
<select
id="variant-select"
value={currentVariant}
onChange={handleVariantChange}
className={`p-2 rounded-md text-sm cursor-pointer
${selectBgColor} ${textColor}
border ${selectBorderColor}
focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500`}
>
{Array.from({ length: 8 }, (_, i) => i + 1).map(v => (
<option key={v} value={v}>{v}</option>
))}
</select>
</div>
<div
style={{
width: 'clamp(300px, 80vmin, 700px)',
height: '500px',
position: 'relative',
overflow: 'hidden'
}}
className="border-2 border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl"
>
<ImageTrail
key={key}
items={imageItems}
variant={currentVariant}
/>
</div>
<p className={`text-center text-sm mt-4 ${isDarkMode ? 'text-neutral-400' : 'text-neutral-600'}`}>
Move your mouse over the area above.
</p>
</div>
);
};
export { DemoOne };
