'use client';
import Image from 'next/image';
import {
SliderBtnGroup,
ProgressSlider,
SliderBtn,
SliderContent,
SliderWrapper,
} from '@/components/ui/progressive-carousel';
const items = [
{
img: "https://cdn.21st.dev/assets/mirror/81/819d6181fac78c13d6c5c47b6b886a02ef2d5d1113485d71378b397d0641bb5f.jpg",
title: 'Bridge',
desc: 'A breathtaking view of a city illuminated by countless lights, showcasing the vibrant and bustling nightlife.',
sliderName: 'bridge',
},
{
img: "https://cdn.21st.dev/assets/mirror/c6/c6a93202432615b6731735b389598cce9379eae6ba7fb89bb1628c546425f078.jpg",
title: 'Mountains View',
desc: 'A serene lake reflecting the surrounding mountains and trees, creating a mirror-like surface.',
sliderName: 'mountains',
},
{
img: "https://cdn.21st.dev/assets/mirror/dc/dc44f9b938664426d83cdbc2588cc1703894bdfb8104ae1568410ff443a470d2.jpg",
title: 'Autumn',
desc: 'A picturesque path winding through a dense forest adorned with vibrant autumn foliage.',
sliderName: 'autumn',
},
{
img: "https://cdn.21st.dev/assets/mirror/06/06aec18cd03d0dce8a99e2df34cf15cc64c4686dfb87cda45ffc3eaccc8d91c1.jpg",
title: 'Foggy',
sliderName: 'foggy',
desc: 'A stunning foggy view over the foresh, with the sun casting a golden glow across the forest. ',
},
];
export default function Demos() {
return (
<main className="max-w-4xl px-10 mx-auto">
<ProgressSlider vertical={false} activeSlider='bridge'>
<SliderContent>
{items.map((item, index) => (
<SliderWrapper key={index} value={item?.sliderName}>
<Image
className='rounded-xl 2xl:h-[500px] h-[450px] object-cover'
src={item.img}
width={1900}
height={1080}
alt={item.desc}
/>
</SliderWrapper>
))}
</SliderContent>
<SliderBtnGroup className='absolute bottom-0 h-fit dark:text-white text-black dark:bg-black/40 bg-white/40 backdrop-blur-md overflow-hidden grid grid-cols-2 md:grid-cols-4 rounded-md'>
{items.map((item, index) => (
<SliderBtn
key={index}
value={item?.sliderName}
className='text-left cursor-pointer p-3 border-r'
progressBarClass='dark:bg-black bg-white h-full'
>
<h2 className='relative px-4 rounded-full w-fit dark:bg-white dark:text-black text-white bg-gray-900 mb-2'>
{item.title}
</h2>
<p className='text-sm font-medium line-clamp-2'>{item.desc}</p>
</SliderBtn>
))}
</SliderBtnGroup>
</ProgressSlider>
</main>
);
}
Part of UI Layouts — browse the full library on 21st.dev.