css.gui/apps/docs/pages/examples/grid.tsx.tmp at main · iCodeIN/css.gui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { Editor, Inputs, toCSSObject } from '@compai/css-gui'
import { useState } from 'react'

const initialStyles = {
  gridTemplateColumns: [
    {
      type: 'repeat',
      count: 5,
      trackList: [{ type: 'breadth', value: { value: 1, unit: 'fr' } }],
    },
  ],
  gridTemplateRows: [
    {
      type: 'repeat',
      count: 3,
      trackList: [{ type: 'breadth', value: { value: 1, unit: 'fr' } }],
    },
  ],
}

const initialChildStyles = {
  gridRowStart: {
    position: 2,
    ident: '',
  },
  gridRowEnd: {
    position: 4,
    ident: '',
  },
  gridColumnStart: {
    position: 2,
    ident: '',
  },
  gridColumnEnd: {
    span: true,
    position: 3,
    ident: '',
  },
}

export default function GridExample() {
  const [containerStyles, setContainerStyles] = useState<any>(initialStyles)
  const [childStyles, setChildStyles] = useState<any>(initialChildStyles)

  return (
    <div
      sx={{
        p: [4,5,5],
        display: 'grid',
        gridTemplateColumns: 'minmax(18rem, max-content) 1fr',
        gap: 3,
      }}
    >
      <section>
        <h4>Container</h4>
        <Editor styles={containerStyles} onChange={setContainerStyles}>
          <>
            <Inputs.GridTemplateColumns />
            <Inputs.GridTemplateRows />
          </>
        </Editor>
        <h4>Child</h4>
        <Editor styles={childStyles} onChange={setChildStyles}>
          <>
            <Inputs.GridColumnStart />
            <Inputs.GridColumnEnd />
            <Inputs.GridRowStart />
            <Inputs.GridRowEnd />
          </>
        </Editor>
      </section>
      <div sx={{ display: 'grid', ...toCSSObject(containerStyles) }}>
        {[...Array(100)].map((n, i) => {
          return (
            <div sx={{ border: '1px solid', borderColor: 'text', py: 3, pl: 3 }}>{i}</div>
          )
        })}
        <div
          sx={{
            display: 'flex',
            alignItems: 'center',
            placeContent: 'center',
            backgroundColor: '#6365ff',
            ...toCSSObject(childStyles),
          }}
        >
          Child
        </div>
      </div>
    </div>
  )
}