465 lines
18 KiB
TypeScript
465 lines
18 KiB
TypeScript
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",
|
|
]
|
|
},
|
|
},
|
|
};
|