Grid

1import type { Component, ComponentProps } from "solid-js"
2import { mergeProps, splitProps } from "solid-js"
3 
4import { cn } from "~/lib/utils"
5 
6type Cols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
7type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13
8 
9type GridProps = ComponentProps<"div"> & {
10  cols?: Cols
11  colsSm?: Cols
12  colsMd?: Cols
13  colsLg?: Cols
14}
15 
16const Grid: Component<GridProps> = (rawProps) => {
17  const props = mergeProps({ cols: 1 } satisfies GridProps, rawProps)
18  const [local, others] = splitProps(props, ["cols", "colsSm", "colsMd", "colsLg", "class"])
19 
20  return (
21    <div
22      class={cn(
23        "grid",
24        gridCols[local.cols],
25        local.colsSm && gridColsSm[local.colsSm],
26        local.colsMd && gridColsMd[local.colsMd],
27        local.colsLg && gridColsLg[local.colsLg],
28        local.class
29      )}
30      {...others}
31    />
32  )
33}
34 
35type ColProps = ComponentProps<"div"> & {
36  span?: Span
37  spanSm?: Span
38  spanMd?: Span
39  spanLg?: Span
40}
41 
42const Col: Component<ColProps> = (rawProps) => {
43  const props = mergeProps({ span: 1 as Span }, rawProps)
44  const [local, others] = splitProps(props, ["span", "spanSm", "spanMd", "spanLg", "class"])
45 
46  return (
47    <div
48      class={cn(
49        colSpan[local.span],
50        local.spanSm && colSpanSm[local.spanSm],
51        local.spanMd && colSpanMd[local.spanMd],
52        local.spanLg && colSpanLg[local.spanLg],
53        local.class
54      )}
55      {...others}
56    />
57  )
58}
59 
60export { Grid, Col }
61 
62const gridCols: { [key in Cols]: string } = {
63  0: "grid-cols-none",
64  1: "grid-cols-1",
65  2: "grid-cols-2",
66  3: "grid-cols-3",
67  4: "grid-cols-4",
68  5: "grid-cols-5",
69  6: "grid-cols-6",
70  7: "grid-cols-7",
71  8: "grid-cols-8",
72  9: "grid-cols-9",
73  10: "grid-cols-10",
74  11: "grid-cols-11",
75  12: "grid-cols-12"
76}
77 
78const gridColsSm: { [key in Cols]: string } = {
79  0: "sm:grid-cols-none",
80  1: "sm:grid-cols-1",
81  2: "sm:grid-cols-2",
82  3: "sm:grid-cols-3",
83  4: "sm:grid-cols-4",
84  5: "sm:grid-cols-5",
85  6: "sm:grid-cols-6",
86  7: "sm:grid-cols-7",
87  8: "sm:grid-cols-8",
88  9: "sm:grid-cols-9",
89  10: "sm:grid-cols-10",
90  11: "sm:grid-cols-11",
91  12: "sm:grid-cols-12"
92}
93 
94const gridColsMd: { [key in Cols]: string } = {
95  0: "md:grid-cols-none",
96  1: "md:grid-cols-1",
97  2: "md:grid-cols-2",
98  3: "md:grid-cols-3",
99  4: "md:grid-cols-4",
100  5: "md:grid-cols-5",
101  6: "md:grid-cols-6",
102  7: "md:grid-cols-7",
103  8: "md:grid-cols-8",
104  9: "md:grid-cols-9",
105  10: "md:grid-cols-10",
106// … truncated