stack-craft/frontend/src/pages/buttons-demo.tsx at d73f1f2014ed63daa3bf64668acef54f01139e34 · furystack/stack-craft · 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
import { createComponent, Shade } from '@furystack/shades'
import { Button } from '@furystack/shades-common-components'

export const ButtonsDemo = Shade({
  shadowDomName: 'buttons-demo',
  css: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: '5em',
    flexDirection: 'column',
    background: 'url(https://talkillustration.com/wp-content/uploads/2015/04/ghtyj.jpg)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  render: ({ useState }) => {
    const [disabled, setDisabled] = useState('disabled', false)
    const txt = 'Button Text'
    const onclick = () => {
      /** */
    }
    return (
      <div>
        <div>
          <div>
            <Button onclick={onclick} disabled={disabled}>
              {txt}
            </Button>

            <Button onclick={onclick} disabled={disabled} color="primary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} color="secondary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} color="error">
              {txt}
            </Button>
          </div>
          <div>
            <Button onclick={onclick} disabled={disabled} variant="outlined">
              {txt}
            </Button>

            <Button onclick={onclick} disabled={disabled} variant="outlined" color="primary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} variant="outlined" color="secondary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} variant="outlined" color="error">
              {txt}
            </Button>
          </div>
          <div>
            <Button onclick={onclick} disabled={disabled} variant="contained">
              {txt}
            </Button>

            <Button onclick={onclick} disabled={disabled} variant="contained" color="primary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} variant="contained" color="secondary">
              {txt}
            </Button>
            <Button onclick={onclick} disabled={disabled} variant="contained" color="error">
              {txt}
            </Button>
          </div>
        </div>
        <Button
          onclick={() => {
            setDisabled(!disabled)
          }}
        >
          Disable All
        </Button>
      </div>
    )
  },
})