40 lines
825 B
TypeScript
40 lines
825 B
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
// 🔧 Carousel Config
|
|
const desktopConfig = {
|
|
GAP: 300,
|
|
ROT_Y: 18,
|
|
DEPTH: 210,
|
|
SCALE_DROP: 0.12,
|
|
};
|
|
|
|
const mobileConfig = {
|
|
GAP: 110, // Smaller gap for mobile
|
|
ROT_Y: 0, // Flatter view on mobile
|
|
DEPTH: 150, // Less depth
|
|
SCALE_DROP: 0.1, // Less aggressive scaling
|
|
};
|
|
|
|
export const useResponsiveCarousel = () => {
|
|
const [config, setConfig] = useState(desktopConfig);
|
|
|
|
useEffect(() => {
|
|
const checkScreenSize = () => {
|
|
if (window.innerWidth < 768) {
|
|
setConfig(mobileConfig);
|
|
} else {
|
|
setConfig(desktopConfig);
|
|
}
|
|
};
|
|
|
|
checkScreenSize();
|
|
window.addEventListener('resize', checkScreenSize);
|
|
|
|
return () => window.removeEventListener('resize', checkScreenSize);
|
|
}, []);
|
|
|
|
return config;
|
|
};
|