update grid carousel breakpoints

This commit is contained in:
jeffvli
2025-11-23 01:24:38 -08:00
parent f3b7d776e8
commit 0bc3ea51ec
@@ -45,9 +45,12 @@ const pageVariants: Variants = {
export function GridCarousel(props: GridCarouselProps) { export function GridCarousel(props: GridCarouselProps) {
const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props; const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
const { ref, ...cq } = useContainerQuery({ const { ref, ...cq } = useContainerQuery({
lg: 900, '2xl': 1024,
'3xl': 1280,
lg: 768,
md: 600, md: 600,
sm: 360, sm: 360,
xl: 900,
}); });
const [currentPage, setCurrentPage] = useState({ const [currentPage, setCurrentPage] = useState({
@@ -72,12 +75,12 @@ export function GridCarousel(props: GridCarouselProps) {
}, [currentPage, onNextPage]); }, [currentPage, onNextPage]);
const cardsToShow = getCardsToShow({ const cardsToShow = getCardsToShow({
isLargerThan2xl: cq.is2xl,
isLargerThan3xl: cq.is3xl,
isLargerThanLg: cq.isLg, isLargerThanLg: cq.isLg,
isLargerThanMd: cq.isMd, isLargerThanMd: cq.isMd,
isLargerThanSm: cq.isSm, isLargerThanSm: cq.isSm,
isLargerThanXl: cq.isXl, isLargerThanXl: cq.isXl,
isLargerThanXxl: cq.is2xl,
isLargerThanXxxl: cq.is3xl,
}); });
const visibleCards = useMemo(() => { const visibleCards = useMemo(() => {
@@ -190,33 +193,33 @@ export function GridCarousel(props: GridCarouselProps) {
} }
function getCardsToShow(breakpoints: { function getCardsToShow(breakpoints: {
isLargerThan2xl: boolean;
isLargerThan3xl: boolean;
isLargerThanLg: boolean; isLargerThanLg: boolean;
isLargerThanMd: boolean; isLargerThanMd: boolean;
isLargerThanSm: boolean; isLargerThanSm: boolean;
isLargerThanXl: boolean; isLargerThanXl: boolean;
isLargerThanXxl: boolean;
isLargerThanXxxl: boolean;
}) { }) {
if (breakpoints.isLargerThanXxxl) { if (breakpoints.isLargerThan3xl) {
return 14;
}
if (breakpoints.isLargerThanXxl) {
return 10;
}
if (breakpoints.isLargerThanXl) {
return 8; return 8;
} }
if (breakpoints.isLargerThanLg) { if (breakpoints.isLargerThan2xl) {
return 6; return 6;
} }
if (breakpoints.isLargerThanMd) { if (breakpoints.isLargerThanXl) {
return 5;
}
if (breakpoints.isLargerThanLg) {
return 4; return 4;
} }
if (breakpoints.isLargerThanMd) {
return 3;
}
if (breakpoints.isLargerThanSm) { if (breakpoints.isLargerThanSm) {
return 3; return 3;
} }