320 lines
14 KiB
TypeScript
320 lines
14 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-90 2xl:min-h-100" },
|
|
4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-90 2xl:min-h-100" },
|
|
},
|
|
"bento-grid": {
|
|
1: null,
|
|
2: null,
|
|
3: {
|
|
gridCols: "md:grid-cols-4",
|
|
gridRows: "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
|
|
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-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
|
|
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-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
|
|
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-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
|
|
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",
|
|
]
|
|
},
|
|
},
|
|
"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",
|
|
]
|
|
},
|
|
},
|
|
"two-items-per-row": {
|
|
1: null,
|
|
2: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem] 2xl:grid-rows-[32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
3: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem] 2xl:grid-rows-[32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-2 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
4: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem] 2xl:grid-rows-[32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
5: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-2 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
6: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
7: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-2 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
8: {
|
|
gridCols: "md:grid-cols-2",
|
|
gridRows: "md:grid-rows-[28rem_28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem_32rem]",
|
|
itemClasses: [
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
"md:col-span-1 md:min-h-0 md:overflow-hidden",
|
|
]
|
|
},
|
|
},
|
|
};
|