css.gui/apps/docs/pages/examples/svg.tsx at html-blocks · johno/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
import { codegen, Editor, toCSSObject } from '@compai/css-gui'
import { useState } from 'react'
import { defaultTheme } from '../../data/default-theme'
import { Container } from '../../components/Container'

const initialStyles = {
  stroke: '#fff',
  fill: 'none',
  strokeAlignment: {
    value: 'center',
    unit: 'keyword',
  },
  strokeWidth: {
    value: 8,
    unit: 'px',
  },
  strokeLinejoin: {
    value: 'round',
    unit: 'keyword',
  },
  strokeLinecap: {
    value: 'square',
    unit: 'keyword',
  },
  strokeDashadjust: {
    value: 'dashed',
    unit: 'keyword',
  },
  strokeDashcorner: {
    value: 0,
    unit: 'px',
  },
  strokeDashoffset: {
    value: 0,
    unit: 'px',
  },
  strokeDasharray: [
    { value: 0, unit: 'number' },
    { value: 8, unit: 'number' },
    { value: 0, unit: 'number' },
    { value: 24, unit: 'number' },
  ],
}
export default function SvgExample() {
  const [styles, setStyles] = useState<any>(initialStyles)

  return (
    <div
      sx={{
        pt: 5,
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div>
        <svg width="400" height="400">
          <circle sx={{ ...toCSSObject(styles) }} cx={200} cy={200} r={150} />
        </svg>
        <section
          sx={{
            '& > div': {
              display: 'grid',
              gap: '1em',
            },
          }}
        >
          <Editor
            styles={styles}
            onChange={setStyles}
            theme={defaultTheme}
          ></Editor>
        </section>
      </div>
    </div>
  )
}