import { useState } from 'react'
import ReactDOM from 'react-dom/client'
export default function ComponentDemo() {
  const [count, setCount] = useState(0)
  return (
    <div
      className="w-36 h-16 bg-amber-300 rounded-sm flex items-center justify-center text-[#242424] cursor-pointer"
      onClick={() => {
        setCount(count + 1)
        message(`这个是第${count}条消息`)
      }}
    >
      点击添加信息
    </div>
  )
}

const Message = ({ message }: { message: string }) => {
  return <div>{message}</div>
}
const queue: Item[] = []
interface Item {
  messageContainer: HTMLDivElement
  root: ReactDOM.Root
}
const message = (message: string) => {
  const messageContainer = document.createElement('div')
  messageContainer.className =
    'message-container fixed m-[0_auto] bg-white text-black p-4 rounded-md left-1/2 z-[100] mb-4'
  messageContainer.style.top = `${queue.length * 70}px`
  document.body.appendChild(messageContainer)
  const root = ReactDOM.createRoot(messageContainer)
  root.render(<Message message={message} />)
  queue.push({
    messageContainer,
    root,
  })
  setTimeout(() => {
    const item = queue.find((item) => item.messageContainer === messageContainer)
    if (item) {
      item.root.unmount()
      document.body.removeChild(item.messageContainer)
      queue.splice(queue.indexOf(item), 1)
    }
  }, 2000)
}

import Card from './Card'

export default function App() {
  return (
    <>
      <Card title="card1"></Card>
      <Card title="card2"></Card>
    </>
  )
}