@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).
29 lines • 1.69 kB
JSX
"use client";
import { AnimatePresence, motion } from "motion/react";
import { Elements } from "../../../components";
import Style, { NoData } from "./List.styled";
import ListItem from "./ListItem";
export default function List(props) {
const fallback = props?.fallback || "There is no data.";
const fill = props?.fill || false;
const list = typeof props?.formatter === "function" ? props?.formatter(props?.list) : props?.list;
return (<>
{props?.list && typeof props?.list !== "string" && props?.list?.length > 0 ? (<Style $fill={fill} style={props?.style}>
<AnimatePresence mode="popLayout">
<>
{list?.map((data, i) => (<ListItem key={data?.index || i} as={data?.motion && motion.div} {...(data?.children && data)} motion={data?.motion && {
...(typeof data?.motion === "object" && data?.motion),
layoutId: `${i}`,
}}>
{data?.children ? data?.children : data}
</ListItem>))}
</>
</AnimatePresence>
</Style>) : (<NoData key="fallback" as={motion.div} initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }} transition={{ ease: "easeInOut", duration: 0.3 }} layout>
{typeof fallback === "string" ? (<Elements.Text type={"desc"} opacity={0.6}>
{fallback}
</Elements.Text>) : (<>{fallback}</>)}
</NoData>)}
</>);
}
//# sourceMappingURL=List.jsx.map