All files / Rindu/components/Toast Toast.tsx

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
19x
 
19x
19x
 
92x
80x
 
80x
 
80x
41x
 
 
80x
75x
 
 
 
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ReactElement, useEffect, useState } from "react";
 
import { PortalTarget, ToastCard } from "components";
import { useToast } from "hooks/useToast";
 
export default function Toast(): ReactElement | null {
  const [targetNode, setTargetNode] = useState<Element | null>();
 
  const { toasts } = useToast();
 
  useEffect(() => {
    setTargetNode(document.querySelector("#toast"));
  }, []);
 
  if (targetNode === undefined || !toasts.length) {
    return null;
  }
 
  return (
    <PortalTarget targetId="toast">
      <section>
        {toasts.map(({ id, variant, message, displayTime }) => (
          <ToastCard
            key={id}
            id={id}
            variant={variant}
            message={message}
            displayTime={displayTime}
          />
        ))}
        <style jsx>{`
          section {
            max-width: 400px;
            width: fit-content;
            position: fixed;
            left: 50%;
            bottom: 90px;
            transform: translate(-50%, -50%);
            margin: 0 auto;
          }
          :global(#toast) {
            position: relative;
            z-index: 993332323233232399;
          }
          @media screen and (max-width: 500px) {
            section {
              max-width: calc(100% -2rem);
              width: max-content;
            }
          }
        `}</style>
      </section>
    </PortalTarget>
  );
}