Untitled

export const ChannelCarousel = ({ name }: { name: string }) => {
	const [align, setAlign] = useState('start');

	useEffect(() => {
		const handleResize = () => {
			const width = window.innerWidth;

			if (width >= 768) {
				// md screens and up
				setAlign('start');
			} else {
				setAlign('center');
			}
		};

		window.addEventListener('resize', handleResize);
		handleResize(); // call the function initially to set the alignment based on the initial window size

		return () => {
			// cleanup - remove the listener when the component unmounts
			window.removeEventListener('resize', handleResize);
		};
	}, []);

	return (
		<>
			<h1 className='text-2xl font-semibold'>{name}</h1>
			<Carousel
				opts={{
					align: align as 'start' | 'center',
					loop: true,
					skipSnaps: true,
				}}
				className='md:w-full md:px-10'>
				<CarouselContent className='-ml-1'>
					{Array.from({ length: 9 }).map((_, index) => (
						<CarouselItem
							key={index}
							className='!pl-1  basis-1/2 md:basis-1/4 lg:basis-1/5'>
							<div className='p-1'>
								<Card>
									<CardContent className='flex items-center justify-center p-6 aspect-video'>
										<span className='text-3xl font-semibold'>
											{index + 1}
										</span>
									</CardContent>
								</Card>
							</div>
						</CarouselItem>
					))}
				</CarouselContent>
				<CarouselPrevious className='hidden -left-2 md:flex' />
				<CarouselNext className='hidden -right-2 md:flex' />
			</Carousel>
		</>
	);
};