@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
25 lines • 1.2 kB
JSX
"use client";
import { Layouts } from "../../../components";
import Notify from "../notification/Notify";
import Style from "./Toast.styled";
export default function Toast({ list, active, width, align, style, swipe }) {
width = width || 60;
align = align === "left" || align === "right" ? align : "left";
return (active &&
list &&
list?.length > 0 && (<Style $width={width} $align={align} style={style} data-active={typeof list !== "undefined" ? true : false}>
<Layouts.Contents.InnerContent style={{ flexDirection: "column-reverse" }}>
{/* <AnimatePresence key={"notification"} mode="popLayout"> */}
{list?.map((v, k) => (<Notify key={v?.id || k} direction={align}
// as={motion.div}
// initial={{ y: "15%", opacity: 0 }}
// animate={{ y: "0", opacity: 1 }}
// exit={{ x: "15%", opacity: 0 }}
// transition={{ ease: "easeInOut", duration: 0.3 }}
// layout
{...{ ...v, swipe, type: "toast" }}/>))}
{/* </AnimatePresence> */}
</Layouts.Contents.InnerContent>
</Style>));
}
//# sourceMappingURL=Toast.jsx.map