cs-2022-class-profile/components/SideComponentWrapper.tsx

import React from "react";

import styles from "./SideComponentWrapper.module.css";

type ComponentWrapperProps = {
  children: React.ReactNode;
  heading: string;
  body: string;
  align?: "left" | "right";
  noBackground?: boolean;
};

export function SideComponentWrapper({
  heading,
  body,
  children,
  align = "left",
  noBackground = false,
}: ComponentWrapperProps) {
  return (
    <div
      className={`${
        align === "right" ? styles.wrapperRight : styles.wrapperLeft
      } ${noBackground ? styles.noBackground : ""}`}
    >
      <div className={styles.internalWrapper}>
        <h3>{heading}</h3>
        <p>{body}</p>
      </div>
      <div className={styles.internalWrapper}>{children}</div>
    </div>
  );
}