@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).
21 lines • 1.27 kB
JSX
"use client";
import { motion } from "motion/react";
import { useSwipe } from "../../../../hooks";
import Style from "./SlideContainer.styled";
import SlideContent from "./SlideContent";
export default function SlideContainer(props) {
const vertical = props?.vertical || false;
const offset = typeof props?.offset === "number" ? props?.offset : 15;
const unit = typeof props?.unit === "string" ? props?.unit : "%";
const swipe = useSwipe(props?.swipe && { ...(typeof props?.swipe === "object" && props?.swipe), length: props?.contents?.length });
return (<Style as={motion.div} $vertical={vertical} style={props?.style}>
{props?.contents && props?.contents?.length > 0 ? (
// <AnimatePresence initial={false} custom={swipe?.direction}>
props?.contents.map((content, i) => (<SlideContent key={i} vertical={vertical} offset={offset} unit={unit} active={swipe ? swipe?.index === i : content.active} swipe={swipe && { ...swipe, variants: swipe?.variants(i) }} style={content?.style}>
{content.children}
</SlideContent>))) : (
/* </AnimatePresence> */
<SlideContent>There is no content.</SlideContent>)}
</Style>);
}
//# sourceMappingURL=SlideContainer.jsx.map