import React, { useState } from 'react'
import { Button, AnimatedToaster } from 'react-icecream'

export default function Demo() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <div style={{ marginBottom: '24px' }}>
        <Button onClick={() => setVisible(!visible)}>{visible ? '隐藏' : '显示'} Toaster</Button>
      </div>
      <div style={{ minHeight: '100px', border: '1px solid #efefef', overflow: 'hidden' }}>
        <AnimatedToaster visible={visible} type="info" message="新消息来了" style={{ margin: '0 auto' }} />
      </div>
    </>
  )
}