tsx
1
import {
2
  Button,
3
  H4,
4
  Toast,
5
  ToastProvider,
6
  CheckIcon,
7
  EyeClosedIcon,
8
} from '@finetwork/ui'
9
import { useState } from 'react'
10
import { styled } from '../styles/stitches.config'
11

12
const kinds = [
13
  'primary',
14
  'secondary',
15
  'tertiary',
16
  'success',
17
  'warning',
18
  'error',
19
  'info',
20
]
21

22
const StyledContainer = styled('div', {
23
  display: 'grid',
24
  gridAutoFlow: 'column',
25
  alignItems: 'center',
26
  gap: '70px',
27
  justifyContent: 'space-around',
28
  padding: '0px 30px',
29
})
30

31
export const StyledButton = styled(Button, {
32
  margin: '0.1rem 1rem',
33
  variants: {
34
    button: {
35
      primary: {},
36
    },
37
  },
38
  compoundVariants: [
39
    {
40
      button: 'primary',
41
      css: {
42
        backgroundColor: '#fff',
43
        '&:hover': {
44
          backgroundColor: '$primary100',
45
        },
46
      },
47
    },
48
  ],
49
})
50

51
export const StyledCheckIcon = styled(CheckIcon, {
52
  color: '$primary',
53
  width: 20,
54
  height: 20,
55
})
56

57
export const StyledCopyIcon = styled(EyeClosedIcon, {
58
  color: '$primary',
59
  width: 20,
60
  height: 20,
61
})
62

63
export const ToastPlayground = () => {
64
  const [notifications, setNotifications] = useState([])
65
  // // If you want to remove notifications from tree components
66
  // useEffect(() => {
67
  //   if (notifications.length > 0) {
68

69
  //     // setTimeout to not remove animation
70
  //     setTimeout(() => {
71
  //       setNotifications((prev) => prev.filter((n) => n.show))
72
  //     }, 2000)
73
  //   }
74

75
  // }, [notifications])
76
  return (
77
    <ToastProvider direction="top-center">
78
      <div>
79
        <Button
80
          onClick={() =>
81
            setNotifications((prev) => [
82
              ...prev,
83
              {
84
                id: prev.length + 1,
85
                show: true,
86
                kind: kinds[Math.floor(Math.random() * kinds.length)],
87
                copied: false,
88
              },
89
            ])
90
          }
91
          size="small"
92
        >
93
          Open toast
94
        </Button>
95
      </div>
96
      {notifications.map((notification) => (
97
        <Toast
98
          withProgressBar={true}
99
          closeable={true}
100
          duration={15000}
101
          key={notification.id}
102
          kind={notification.kind}
103
          open={notification.show}
104
          onOpenChange={() => {
105
            setNotifications((prev) =>
106
              prev.map((n) =>
107
                n.id === notification.id
108
                  ? {
109
                      ...n,
110
                      show: false,
111
                    }
112
                  : n
113
              )
114
            )
115
          }}
116
        >
117
          <StyledContainer>
118
            <H4 kind="primary">Hello world!</H4>
119
            <StyledButton
120
              button="primary"
121
              shape="circle"
122
              onClick={() => {
123
                setNotifications((prev) =>
124
                  prev.map((n) =>
125
                    n.id === notification.id
126
                      ? {
127
                          ...n,
128
                          copied: true,
129
                        }
130
                      : n
131
                  )
132
                )
133
              }}
134
            >
135
              {notification.copied ? <StyledCheckIcon /> : <StyledCopyIcon />}
136
            </StyledButton>
137
          </StyledContainer>
138
        </Toast>
139
      ))}
140
    </ToastProvider>
141
  )
142
}