overmind/packages/overmind-website/examples/api/components_style.ts at webfixes · hipertracker/overmind · 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
export default (ts) =>
  ts
    ? [
        {
          code: `
import { h, Component, useState, useEffect } from 'overmind-components'

const MyComponent: Component = () => {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  })

  useEffect(() => {
    const onMove = (event) => {
      setPosition({
        x: event.clientX,
        y: event.clientY
      })
    }
    window.addEventListener('mousemove', onMove)

    return () => {
      window.removeEventListener('mousemove', onMove)
    }
  }, [])

  return (
    <h1 style={{
      top: position.y + 'px',
      left: position.x + 'px'
    }}>
      I follow the mouse
    </h1>
  )
}
`,
        },
      ]
    : [
        {
          code: `
import { h, useState, useEffect } from 'overmind-components'

const MyComponent = () => {
  const [position, setPosition] = useState({
    x: 0,
    y: 0
  })

  useEffect(() => {
    const onMove = (event) => {
      setPosition({
        x: event.clientX,
        y: event.clientY
      })
    }
    window.addEventListener('mousemove', onMove)

    return () => {
      window.removeEventListener('mousemove', onMove)
    }
  }, [])

  return (
    <h1 style={{
      top: position.y + 'px',
      left: position.x + 'px'
    }}>
      I follow the mouse
    </h1>
  )
}
`,
        },
      ]