React Width Wrapper #react

WidthWrapper.props.ts

export interface IWidthWrapperProps {
  children: React.ReactNode;
  className?: string;
  width?: "text" | "block";
}

WidthWrapper.tsx

// width wrapper component with tailwindCSS
// use it to standardize content width across your app

import type { IWidthWrapperProps } from "./WidthWrapper.props";

const WidthWrapper: React.FC<IWidthWrapperProps> = ({
  children,
  className = "",
  width = "block",
}): JSX.Element => {
  const baseClass = "h-full mx-auto width-wrapper";

  const widthClass = () => {
    let _widthClass = "";

    const widthMap = {
      text: "max-w-prose",
      block: "max-w-5xl",
    };

    _widthClass = widthMap[width];

    const paddingMap = {
      text: "px-4 sm:px-6 md:px-0",
      block: "px-10 sm:px-6 lg:px-8",
    };

    _widthClass += ` ${paddingMap[width]}`;

    return _widthClass;
  };

  const classes = `${baseClass} ${widthClass()} ${className}`;

  return <div className={classes}>{children}</div>;
};

export default WidthWrapper;