47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { CSSProperties, FC, ReactNode } from "react";
|
|
import classNames from "classnames";
|
|
import { MotionWrapper } from "@/components/MotionWrapper/MotionWrapper";
|
|
import styles from "./PageItem.module.css";
|
|
|
|
type Props = {
|
|
children: ReactNode;
|
|
style?: CSSProperties;
|
|
fullHeight?: boolean;
|
|
fullHeightFixed?: boolean;
|
|
noBorderRadius?: boolean;
|
|
fullScreenMobile?: boolean;
|
|
};
|
|
|
|
const PageItem: FC<Props> = ({
|
|
children,
|
|
style,
|
|
fullHeight = false,
|
|
fullHeightFixed = false,
|
|
noBorderRadius = false,
|
|
fullScreenMobile = false,
|
|
}) => {
|
|
const pageItemBody = (
|
|
<div
|
|
style={style}
|
|
className={classNames(
|
|
styles.container,
|
|
fullHeight && styles["container-full-height"],
|
|
fullHeightFixed && styles["container-full-height-fixed"],
|
|
noBorderRadius && styles["container-no-border-radius"],
|
|
fullScreenMobile && styles["container-full-screen-mobile"]
|
|
)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<MotionWrapper
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}>
|
|
{pageItemBody}
|
|
</MotionWrapper>
|
|
);
|
|
};
|
|
export default PageItem;
|