Nextjs Core Progress

import React from 'react';
// core components
import CustomLinearProgress from "components/CustomLinearProgress/CustomLinearProgress.js";

export default function LinearProgress(){
  const successStyle = { width: "35%", display: "inline-block" };
  const warningStyle = { width: "20%", display: "inline-block" };
  const dangerStyle = { width: "45%", display: "inline-block" };
  return (
    <div>
      <CustomLinearProgress
        variant="determinate"
        color="primary"
        value={30}
      />
      <CustomLinearProgress
        variant="determinate"
        color="info"
        value={60}
      />
      <CustomLinearProgress
        variant="determinate"
        color="success"
        value={100}
        style={successStyle}
      />
      <CustomLinearProgress
        variant="determinate"
        color="warning"
        value={100}
        style={warningStyle}
      />
      <CustomLinearProgress
        variant="determinate"
        color="danger"
        value={25}
        style={dangerStyle}
      />
    </div>
  );
}

CustomLinearProgress.defaultProps = {
  color: "gray"
};

CustomLinearProgress.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "warning",
    "danger",
    "success",
    "info",
    "rose",
    "gray"
  ])
};