✨ components

package.json

@@ -13,6 +13,7 @@
     "aos": "^2.3.4",
     "axios": "^0.26.0",
     "chroma-js": "^2.4.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",

src/components/CustomBadge.jsx

@@ -0,0 +1,204 @@
+import Badge from "@mui/material/Badge";
+import { styled } from "@mui/material/styles";
+import { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const StyledBadge = styled(Badge)(({ theme, ownerState }) => {
+  const { palette, typography, borders, functions } = theme;
+  const {
+    color,
+    circular,
+    border,
+    size,
+    indicator,
+    variant,
+    container,
+    children,
+  } = ownerState;
+
+  const { white, dark, gradients, badgeColors } = palette;
+  const { size: fontSize, fontWeightBold } = typography;
+  const { borderRadius, borderWidth } = borders;
+  const { pxToRem, linearGradient } = functions;
+
+  // padding values
+  const paddings = {
+    xs: "0.575em 0.775em 0.4em",
+    sm: "0.55em 0.9em",
+    md: "0.75em 1em 0.65em",
+    lg: "0.925em 1.375em 0.85em",
+  };
+
+  // fontSize value
+  const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
+
+  // border value
+  const borderValue = border ? `${borderWidth[1]} solid ${white.main}` : "none";
+
+  // borderRadius value
+  let borderRadiusValue = size === "xs" ? borderRadius.sm : borderRadius.md;
+
+  if (circular) {
+    borderRadiusValue = borderRadius.section;
+  }
+
+  // styles for the badge with indicator={true}
+  const indicatorStyles = (sizeProp) => {
+    let widthValue = pxToRem(20);
+    let heightValue = pxToRem(20);
+
+    if (sizeProp === "medium") {
+      widthValue = pxToRem(24);
+      heightValue = pxToRem(24);
+    } else if (sizeProp === "large") {
+      widthValue = pxToRem(32);
+      heightValue = pxToRem(32);
+    }
+
+    return {
+      width: widthValue,
+      height: heightValue,
+      display: "grid",
+      placeItems: "center",
+      textAlign: "center",
+      borderRadius: "50%",
+      padding: 0,
+      border: borderValue,
+    };
+  };
+
+  // styles for the badge with variant="gradient"
+  const gradientStyles = (colorProp) => {
+    const backgroundValue = gradients[colorProp]
+      ? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
+      : linearGradient(gradients.info.main, gradients.info.state);
+    const colorValue = colorProp === "light" ? dark.main : white.main;
+
+    return {
+      background: backgroundValue,
+      color: colorValue,
+    };
+  };
+
+  // styles for the badge with variant="contained"
+  const containedStyles = (colorProp) => {
+    const backgroundValue = badgeColors[colorProp]
+      ? badgeColors[colorProp].background
+      : badgeColors.info.background;
+    let colorValue = badgeColors[colorProp]
+      ? badgeColors[colorProp].text
+      : badgeColors.info.text;
+
+    if (colorProp === "light") {
+      colorValue = dark.main;
+    }
+    return {
+      background: backgroundValue,
+      color: colorValue,
+    };
+  };
+
+  // styles for the badge with no children and container={false}
+  const standAloneStyles = () => ({
+    position: "static",
+    marginLeft: pxToRem(8),
+    transform: "none",
+    fontSize: pxToRem(9),
+  });
+
+  // styles for the badge with container={true}
+  const containerStyles = () => ({
+    position: "relative",
+    transform: "none",
+  });
+
+  return {
+    "& .MuiBadge-badge": {
+      height: "auto",
+      padding: paddings[size] || paddings.xs,
+      fontSize: fontSizeValue,
+      fontWeight: fontWeightBold,
+      lineHeight: 1,
+      textAlign: "center",
+      whiteSpace: "nowrap",
+      verticalAlign: "baseline",
+      border: borderValue,
+      borderRadius: borderRadiusValue,
+      ...(indicator && indicatorStyles(size)),
+      ...(variant === "gradient" && gradientStyles(color)),
+      ...(variant === "contained" && containedStyles(color)),
+      ...(!children && !container && standAloneStyles(color)),
+      ...(container && containerStyles(color)),
+    },
+  };
+});
+
+const CustomBadge = forwardRef(
+  (
+    {
+      color,
+      variant,
+      size,
+      circular,
+      indicator,
+      border,
+      container,
+      children,
+      ...rest
+    },
+    ref
+  ) => (
+    <StyledBadge
+      {...rest}
+      ownerState={{
+        color,
+        variant,
+        size,
+        circular,
+        indicator,
+        border,
+        container,
+        children,
+      }}
+      ref={ref}
+      color="default"
+    >
+      {children}
+    </StyledBadge>
+  )
+);
+
+// Setting default values for the props of CustomBadge
+CustomBadge.defaultProps = {
+  color: "info",
+  variant: "gradient",
+  size: "sm",
+  circular: false,
+  indicator: false,
+  border: false,
+  children: false,
+  container: false,
+};
+
+// Typechecking props of the CustomBadge
+CustomBadge.propTypes = {
+  color: PropTypes.oneOf([
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "light",
+    "dark",
+  ]),
+  variant: PropTypes.oneOf(["gradient", "contained"]),
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg"]),
+  circular: PropTypes.bool,
+  indicator: PropTypes.bool,
+  border: PropTypes.bool,
+  children: PropTypes.node,
+  container: PropTypes.bool,
+};
+
+export default CustomBadge;

src/components/CustomBox.jsx

@@ -0,0 +1,143 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const StyledBox = styled(Box)(({ theme, ownerState }) => {
+  const { palette, functions, borders, boxShadows } = theme;
+  const { variant, bgColor, color, opacity, borderRadius, shadow } = ownerState;
+
+  const { gradients, grey /*, white */ } = palette;
+  const { linearGradient } = functions;
+  const { borderRadius: radius } = borders;
+
+  const greyColors = {
+    "grey-100": grey[100],
+    "grey-200": grey[200],
+    "grey-300": grey[300],
+    "grey-400": grey[400],
+    "grey-500": grey[500],
+    "grey-600": grey[600],
+    "grey-700": grey[700],
+    "grey-800": grey[800],
+    "grey-900": grey[900],
+  };
+
+  const validGradients = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "dark",
+    "light",
+  ];
+
+  const validColors = [
+    "transparent",
+    "white",
+    "black",
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "light",
+    "dark",
+    "text",
+    "grey-100",
+    "grey-200",
+    "grey-300",
+    "grey-400",
+    "grey-500",
+    "grey-600",
+    "grey-700",
+    "grey-800",
+    "grey-900",
+  ];
+
+  const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"];
+  const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"];
+
+  // background value
+  let backgroundValue = bgColor;
+
+  if (variant === "gradient") {
+    backgroundValue = validGradients.find((el) => el === bgColor)
+      ? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
+      : //   : white.main;
+        "rgba(0,0,0,0)";
+  } else if (validColors.find((el) => el === bgColor)) {
+    backgroundValue = palette[bgColor]
+      ? palette[bgColor].main
+      : greyColors[bgColor];
+  } else {
+    backgroundValue = bgColor;
+  }
+
+  // color value
+  let colorValue = color;
+
+  if (validColors.find((el) => el === color)) {
+    colorValue = palette[color] ? palette[color].main : greyColors[color];
+  }
+
+  // borderRadius value
+  let borderRadiusValue = borderRadius;
+
+  if (validBorderRadius.find((el) => el === borderRadius)) {
+    borderRadiusValue = radius[borderRadius];
+  }
+
+  // boxShadow value
+  let boxShadowValue = boxShadows;
+
+  if (validBoxShadows.find((el) => el === shadow)) {
+    boxShadowValue = boxShadows[shadow];
+  }
+
+  return {
+    opacity,
+    background: backgroundValue,
+    color: colorValue,
+    borderRadius: borderRadiusValue,
+    boxShadow: boxShadowValue,
+  };
+});
+
+const CustomBox = forwardRef(
+  (
+    { variant, bgColor, color, opacity, borderRadius, shadow, ...rest },
+    ref
+  ) => (
+    <StyledBox
+      {...rest}
+      ref={ref}
+      ownerState={{ variant, bgColor, color, opacity, borderRadius, shadow }}
+    />
+  )
+);
+
+// Setting default values for the props of CustomBox
+CustomBox.defaultProps = {
+  variant: "contained",
+  bgColor: "transparent",
+  color: "dark",
+  opacity: 1,
+  borderRadius: "none",
+  shadow: "none",
+};
+
+// Typechecking props for the CustomBox
+CustomBox.propTypes = {
+  variant: PropTypes.oneOf(["contained", "gradient"]),
+  bgColor: PropTypes.string,
+  color: PropTypes.string,
+  opacity: PropTypes.number,
+  borderRadius: PropTypes.string,
+  shadow: PropTypes.string,
+};
+
+export default CustomBox;