mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
update grid carousel breakpoints
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user