FeatureWithRightImage before introducing styled-components

FeatureWithRightImage.jsx

import React, { useEffect } from "react";

import classnames from "classnames";

import { Button, Typography } from "Commons";

import { POSITIONS } from "./constants";

const FeatureWithRightImage = ({
  configurations,
  className = "",
  id,
  baseUrl = "/",
}) => {
  const { properties, design } = configurations;
  const {
    content: { title, description, position: contentPosition },
    image: { src: imageURL, position: imagePosition },
    backgroundImage: { src: backgroundImageURL },
  } = properties;

  const textOnlyLayout = imageURL === "";

  const {
    backgroundColor,
    paddingVertical,
    borderTop: {
      borderWidth: borderTopWidth,
      borderStyle: borderTopStyle,
      borderColor: borderTopColor,
    },
    borderBottom: {
      borderWidth: borderBottomWidth,
      borderStyle: borderBottomStyle,
      borderColor: borderBottomColor,
    },
  } = design.body;
  const { color: titleColor } = design.title;
  const { color: descriptionColor } = design.description;
  const { width, borderRadius } = design.image;
  const { backgroundSize, backgroundPosition, backgroundRepeat } =
    design.backgroundImage;

  const {
    color: buttonColor,
    backgroundColor: buttonBackgroundColor,
    border: { borderColor: buttonBorderColor },
  } = design.buttons;

  useEffect(() => {
    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-background-color",
      backgroundColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-border-top-color",
      borderTopColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-border-bottom-color",
      borderBottomColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-title-color",
      titleColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-description-color",
      descriptionColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-button-color",
      buttonColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-button-background-color",
      buttonBackgroundColor
    );

    document.documentElement.style.setProperty(
      "--neeto-site-feature-section-button-border-color",
      buttonBorderColor
    );
  }, []);

  const baseClasses = classnames({
    "flex gap-12": true,
    "items-center": !textOnlyLayout,
    "flex-col lg:flex-row": imagePosition === POSITIONS.RIGHT.label,
    "flex-col-reverse lg:flex-row-reverse":
      imagePosition === POSITIONS.LEFT.label,
    "flex-col": imagePosition === POSITIONS.BOTTOM.label,
    "flex-col-reverse": imagePosition === POSITIONS.TOP.label,
  });

  const imageBaseClasses = classnames({
    "flex justify-center": true,
    "sm:w-2/3 lg:w-1/2 flex-shrink-0":
      imagePosition === POSITIONS.RIGHT.label ||
      imagePosition === POSITIONS.LEFT.label,
  });

  return (
    <div
      id={id}
      style={{ backgroundImage: `url(${backgroundImageURL})` }}
      className={classnames(
        `${baseClasses} px-8 py-${paddingVertical} border border-l-0 border-r-0 border-t-${borderTopWidth} border-t-${borderTopStyle} border-b-${borderBottomWidth} border-b-${borderBottomStyle} bg-${backgroundSize} bg-${backgroundPosition} bg-${backgroundRepeat} neeto-site-feature-section-background-color neeto-site-feature-section-border-top-color neeto-site-feature-section-border-bottom-color`,
        className
      )}
    >
      <div
        className={classnames({
          "flex flex-grow flex-col": true,
          "sm:items-center sm:text-center lg:items-start lg:text-left":
            contentPosition === POSITIONS.LEFT.label,
          "items-center text-center":
            contentPosition === POSITIONS.CENTER.label,
          "items-end": contentPosition === POSITIONS.RIGHT.label,
        })}
      >
        <Typography
          isTitle
          className="neeto-site-feature-section-title-color"
          component="h1"
          style={design.title}
        >
          {title}
        </Typography>
        <Typography
          className="neeto-site-feature-section-description-color"
          component="p"
          style={design.description}
        >
          {description}
        </Typography>
        <div
          className={classnames(
            "flex w-full items-center gap-3 sm:justify-center",
            {
              "lg:justify-start": contentPosition !== POSITIONS.CENTER.label,
            }
          )}
        >
          {properties.buttons.map(({ label, url, action }) => (
            <Button
              action={action}
              baseUrl={baseUrl}
              className="neeto-site-feature-section-button-color neeto-site-feature-section-button-background-color neeto-site-feature-section-button-border-color w-full justify-center sm:w-auto sm:justify-start"
              key={url}
              label={label}
              style={design.buttons}
              to={url}
            />
          ))}
        </div>
      </div>
      <div className={imageBaseClasses}>
        <img
          className={`lg:w-${width} rounded-${borderRadius}`}
          src={imageURL}
        />
      </div>
    </div>
  );
};

export default FeatureWithRightImage;