tsms/src/components/PageTitle/PageTitle.tsx

"use client";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";

type PageTitleProps = {
  BigTitle: string;
  SecondTitle?: string;
  ThirdTitle?: string;
  FourthTitle?: string;
};

const PageTitle: React.FC<PageTitleProps> = ({ BigTitle, SecondTitle = '', ThirdTitle = '', FourthTitle = ''}) => {
  const { t } = useTranslation("dashboard");
  return (
      <Grid item sm>
         <div style={{marginTop:20,marginLeft:20}}>
          <h1 style={{display:"inline-block",color:"#636363",verticalAlign:"top"}}>{BigTitle}</h1>&nbsp;&nbsp;
          <hr color="#D6DCE1" style={{display:"inline-block",width:1,height:35,marginTop:25}} />&nbsp;&nbsp;
          <h3 style={{display:"inline-block",color:"#6BAFD8",verticalAlign:"top",marginTop:32}}>Overview</h3>&nbsp;
          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}</h3>&nbsp;
          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{BigTitle}</h3>&nbsp;
          {SecondTitle !== '' ? 
            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
            : ""}
          {SecondTitle !== '' ? 
            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{SecondTitle}&nbsp;</h3>
            : ""}
          {ThirdTitle !== '' ? 
          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
          : ""}
          {ThirdTitle !== '' ? 
            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{ThirdTitle}&nbsp;</h3>
            : ""}
          {FourthTitle !== '' ? 
          <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{">"}&nbsp;</h3>
          : ""}
          {FourthTitle !== '' ? 
            <h3 style={{display:"inline-block",color:"#6E6B7B",verticalAlign:"top",marginTop:32}}>{FourthTitle}&nbsp;</h3>
            : ""}
         </div>
      </Grid>
  );
};

export default PageTitle;