Container.tsx

import { Player } from "@lottiefiles/react-lottie-player";
import { useWindowWidth } from "@react-hook/window-size";
import { mdBreakpoint } from "../../constants";

const Container = ({
  children,
  className = "",
  preset,
}: {
  left?: number;
  right?: number;
  top?: number;
  children: any;
  className?: string;
  preset?: "main-sidecard";
}) => {
  const presetClass =
    children && preset === "main-sidecard" ? `flex space-x-3` : "";
  const width = useWindowWidth();

  let presetStyle =
    children && preset === "main-sidecard"
      ? {
          height: "calc(100vh - 182px)",
        }
      : {
          minHeight: "calc(100vh - 182px)",
        };
  return (
    <div
      className={`bg-surface border border-grey-200 px-6 md:px-10 pt-7 md:pt-7`}
      style={{
        paddingBottom: 74,
      }}
    >
      <div
        style={{
          ...presetStyle,
          maxWidth: !children
            ? "100vw"
            : width >= mdBreakpoint
            ? 1152
            : "calc(100vw - 3.5rem)",
        }}
        className={`${className} ${presetClass} ${
          !children ? "grid place-items-center" : " "
        }`}
      >
        {children || (
          <Player
            loop={true}
            autoplay={true}
            keepLastFrame
            src={"https://assets10.lottiefiles.com/packages/lf20_suxdokgx.json"}
            style={{ height: "300px", width: "300px" }}
          />
        )}
      </div>
    </div>
  );
};

export default Container;