UNPKG

@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.63 kB
"use client"; import { Elements } from "../../../components"; import { AnimatePresence, motion } from "motion/react"; import Style, { NoData } from "./Table.styled"; import TableItem from "./TableItem"; export default function Table(props) { const fallback = props?.fallback || "There is no data."; return (<> {props?.list && typeof props?.list !== "string" && props?.list?.length > 0 ? (<AnimatePresence> <Style $fix={props?.fix || false} style={props?.style}> {(typeof props?.formatter === "function" ? props?.formatter(props?.list) : props?.list)?.map((data, i) => (<TableItem key={data?.index || i} {...(data?.children && data)} as={motion.div} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ ease: "easeInOut", duration: 0.3, }} layout> {data?.children ? data?.children : data} </TableItem>))} </Style> </AnimatePresence>) : (<NoData key="fallback" as={motion.div} style={{ width: "100%", height: "100%", ...props?.style }} initial={{ scale: 1, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 1, opacity: 0 }} transition={{ ease: "easeInOut", duration: 0.3 }}> {typeof fallback === "string" ? (<Elements.Text type={"desc"} opacity={0.6}> {fallback} </Elements.Text>) : (<>{fallback}</>)} </NoData>)} </>); } //# sourceMappingURL=Table.jsx.map