@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).
31 lines • 1.58 kB
JSX
"use client";
import { motion } from "motion/react";
import { Layouts } from "../../../components";
import Notify from "./Notify";
import Style from "./Notification.styled";
export default function Notification(props) {
const count = props?.count || 0;
const list = props?.list || [];
const length = list?.length || 0;
const handleBlur = (e) => {
if (typeof props?.onBlur === "function")
props?.onBlur(e);
};
return (<Style tabIndex={1} onBlur={handleBlur}>
{/* <Layouts.Row gap={0.5} style={{ padding: "3em", paddingBottom: "1em", marginBottom: "-2em" }}>
<Elements.Text opacity={count > 0 ? 1 : 0.6} fit>
{count ? count : "No"}
</Elements.Text>
<Elements.Text opacity={0.6} fit>
new notification{count > 1 && "s"}
</Elements.Text>
</Layouts.Row> */}
<Layouts.Contents.InnerContent style={{ flexDirection: "column-reverse" }}>
{/* <AnimatePresence key={"notification"} mode="popLayout"> */}
{list?.length > 0 &&
list?.map((v, k) => v?.type === "divider" ? (<Layouts.Divider key={k}/>) : (<Notify key={v?.id || k} order={k} as={motion.div} initial={{ y: -300, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ x: 300, opacity: 0 }} transition={{ ease: "easeInOut", duration: 0.3 }} layout {...{ ...v, type: "notify" }}/>))}
{/* </AnimatePresence> */}
</Layouts.Contents.InnerContent>
</Style>);
}
//# sourceMappingURL=Notification.jsx.map