Initial commit
This commit is contained in:
137
src/components/cardStack/layouts/grid/GridLayout.tsx
Normal file
137
src/components/cardStack/layouts/grid/GridLayout.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { memo, Children } from "react";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { GridLayoutProps } from "../../types";
|
||||
import { gridConfigs } from "./gridConfigs";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
|
||||
const GridLayout = ({
|
||||
children,
|
||||
itemCount,
|
||||
gridVariant = "uniform-all-items-equal",
|
||||
uniformGridCustomHeightClasses,
|
||||
gridRowsClassName,
|
||||
itemHeightClassesOverride,
|
||||
animationType,
|
||||
containerStyle = "default",
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
gridClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel,
|
||||
}: GridLayoutProps) => {
|
||||
// Get config for this variant and item count
|
||||
const config = gridConfigs[gridVariant]?.[itemCount];
|
||||
|
||||
// Fallback to default uniform grid if no config
|
||||
const gridColsMap = {
|
||||
1: "md:grid-cols-1",
|
||||
2: "md:grid-cols-2",
|
||||
3: "md:grid-cols-3",
|
||||
4: "md:grid-cols-4",
|
||||
};
|
||||
const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4";
|
||||
|
||||
// Use config values or fallback
|
||||
const gridCols = config?.gridCols || defaultGridCols;
|
||||
const gridRows = gridRowsClassName || config?.gridRows || "";
|
||||
const itemClasses = config?.itemClasses || [];
|
||||
const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
|
||||
const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
|
||||
const itemWrapperClass = config?.itemWrapperClass || "";
|
||||
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20",
|
||||
useInvertedBackground === "invertCard"
|
||||
? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
|
||||
: "w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
|
||||
{(title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"grid grid-cols-1",
|
||||
containerStyle === "default" && "gap-6",
|
||||
containerStyle === "card" && "primary-button p-6 rounded-theme-capped gap-6",
|
||||
gridCols,
|
||||
gridRows,
|
||||
gridClassName
|
||||
)}
|
||||
>
|
||||
{childrenArray.map((child, index) => {
|
||||
const itemClass = itemClasses[index] || "";
|
||||
const itemHeightClass = itemHeightClasses[index] || "";
|
||||
const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
|
||||
return combinedClass ? (
|
||||
<div
|
||||
key={index}
|
||||
className={combinedClass}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
key={index}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
GridLayout.displayName = "GridLayout";
|
||||
|
||||
export default memo(GridLayout);
|
||||
464
src/components/cardStack/layouts/grid/gridConfigs.ts
Normal file
464
src/components/cardStack/layouts/grid/gridConfigs.ts
Normal file
@@ -0,0 +1,464 @@
|
||||
type GridConfig = {
|
||||
gridCols: string;
|
||||
gridRows?: string;
|
||||
itemClasses: string[];
|
||||
itemHeightClasses?: string[];
|
||||
heightClasses?: string;
|
||||
itemWrapperClass?: string;
|
||||
} | null;
|
||||
|
||||
type GridVariantConfig = {
|
||||
[key: number]: GridConfig;
|
||||
};
|
||||
|
||||
export const gridConfigs: Record<string, GridVariantConfig> = {
|
||||
"uniform-all-items-equal": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"uniform-staggered-items": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-heights-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-3 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-sizes": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-14 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"uniform-alternating-sizes-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-2 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-14 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
"md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid md:items-start"
|
||||
},
|
||||
},
|
||||
"two-items-tall-short": {
|
||||
1: null,
|
||||
2: {
|
||||
gridCols: "md:grid-cols-2 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-100 2xl:min-h-120",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"two-items-short-tall": {
|
||||
1: null,
|
||||
2: {
|
||||
gridCols: "md:grid-cols-2 md:items-start",
|
||||
itemClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-100 2xl:min-h-120",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
},
|
||||
"bento-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
},
|
||||
"bento-grid-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-4",
|
||||
gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-2 md:row-start-1 md:col-start-3 md:min-h-0 md:overflow-hidden",
|
||||
],
|
||||
heightClasses: "min-h-80"
|
||||
},
|
||||
},
|
||||
"two-columns-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[13rem_13rem_0.5rem_0.5rem_13rem_13rem] 2xl:grid-rows-[16rem_16rem_0.5rem_0.5rem_16rem_16rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-4 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-4 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-2 md:row-start-5 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"asymmetric-60-wide-40-narrow": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-10",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-10 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-10",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"three-columns-all-equal-width": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"four-items-2x2-equal-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[26.5rem_26.5rem] 2xl:grid-rows-[32.5rem_32.5rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"four-items-2x2-alternating-heights": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-start-1 md:row-start-1",
|
||||
"md:col-start-2 md:row-start-1",
|
||||
"md:col-start-1 md:row-start-2",
|
||||
"md:col-start-2 md:row-start-2",
|
||||
],
|
||||
itemHeightClasses: [
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-alternating-heights-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
|
||||
itemClasses: [
|
||||
"md:col-start-1 md:row-start-1",
|
||||
"md:col-start-2 md:row-start-1",
|
||||
"md:col-start-1 md:row-start-2",
|
||||
"md:col-start-2 md:row-start-2",
|
||||
],
|
||||
itemHeightClasses: [
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
"min-h-80 md:min-h-70 2xl:min-h-80",
|
||||
"min-h-80 md:min-h-140 2xl:min-h-160",
|
||||
],
|
||||
heightClasses: "md:!h-fit",
|
||||
itemWrapperClass: "grid"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-staggered-grid": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
itemClasses: [
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"four-items-2x2-staggered-grid-inverted": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: { gridCols: "md:grid-cols-3", itemClasses: [] },
|
||||
4: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
itemClasses: [
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
"md:translate-y-20",
|
||||
"",
|
||||
],
|
||||
heightClasses: "min-h-80 2xl:min-h-90"
|
||||
},
|
||||
},
|
||||
"one-large-right-three-stacked-left": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"items-top-row-full-width-bottom": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"full-width-top-items-bottom-row": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-2",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-3",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
"one-large-left-three-stacked-right": {
|
||||
1: null,
|
||||
2: null,
|
||||
3: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
4: {
|
||||
gridCols: "md:grid-cols-6",
|
||||
gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
|
||||
itemClasses: [
|
||||
"md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
|
||||
"md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
|
||||
]
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user