implement breadcrumb (#68)

.eslintrc.cjs

@@ -51,5 +51,6 @@ module.exports = {
     'react/function-component-definition': 'off',
     'react-hooks/exhaustive-deps': 'off',
     'react/prop-types': 'off',
+    'react/jsx-props-no-spreading': 'off',
   },
 };

src/components/shared/CustomBreadcrumb.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { SvgIconComponent } from '@mui/icons-material';
+import Breadcrumbs, { BreadcrumbsProps } from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: SvgIconComponent;
+}
+
+interface CustomBreadcrumbProps extends BreadcrumbsProps {
+  breadcrumbs: BreadcrumbItem[];
+}
+
+const CustomBreadcrumb: React.FC<CustomBreadcrumbProps> = ({
+  breadcrumbs,
+  ...props
+}) => {
+  return (
+    <div role="presentation">
+      <Breadcrumbs aria-label="breadcrumb" separator=">" {...props}>
+        {breadcrumbs.map((breadcrumb) =>
+          breadcrumb.href ? (
+            <Link
+              key={breadcrumb.label}
+              underline="hover"
+              sx={{ display: 'flex', alignItems: 'center' }}
+              color="inherit"
+              href={breadcrumb.href}
+            >
+              {breadcrumb.icon && (
+                <breadcrumb.icon sx={{ mr: 0.5 }} fontSize="inherit" />
+              )}
+              {breadcrumb.label}
+            </Link>
+          ) : (
+            <Typography
+              key={breadcrumb.label}
+              sx={{
+                color: 'text.primary',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              {breadcrumb.icon && (
+                <breadcrumb.icon sx={{ mr: 0.5 }} fontSize="inherit" />
+              )}
+              {breadcrumb.label}
+            </Typography>
+          )
+        )}
+      </Breadcrumbs>
+    </div>
+  );
+};
+
+export default CustomBreadcrumb;

src/pages/Identifiers/Attestation/Attestation.tsx

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom';
 import StepOne from '../../../components/pages/attestations/StepOne';
 import StepThree from '../../../components/pages/attestations/StepThree';
 import StepTwo from '../../../components/pages/attestations/StepTwo';
+import CustomBreadcrumb from '../../../components/shared/CustomBreadcrumb';
 import CustomStepper from '../../../components/shared/CustomStepper';
 import { Provider } from '../../../enums';
 import { AttestPayload } from '../../../interfaces';
@@ -30,36 +31,46 @@ export default function Attestation() {
     handleNextStep();
   };
 
+  const breadcrumbs = [
+    { label: 'Identifiers', href: '/identifiers' },
+    { label: 'Attestation' },
+  ];
+
   return (
-    <Paper
-      sx={{
-        height: 'calc(100vh - 100px)',
-        p: 2,
-        borderRadius: 4,
-        backgroundColor: 'white',
-        border: '1px solid rgba(0, 0, 0, 0.05)',
-        boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
-      }}
-      variant="elevation"
-      elevation={0}
-    >
-      <Alert severity="info" sx={{ mb: 4 }}>
-        <AlertTitle>Link Your Social Media Accounts</AlertTitle>
-        Attest your social media accounts by linking them to your wallet
-        address. This allows you to prove ownership over these accounts.
-      </Alert>
-      <CustomStepper steps={steps} activeStep={activeStep} />
+    <>
+      <CustomBreadcrumb breadcrumbs={breadcrumbs} className="pb-3" />
+      <Paper
+        sx={{
+          height: 'calc(100vh - 140px)',
+          p: 2,
+          borderRadius: 4,
+          backgroundColor: 'white',
+          border: '1px solid rgba(0, 0, 0, 0.05)',
+          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.05)',
+        }}
+        variant="elevation"
+        elevation={0}
+      >
+        <Alert severity="info" sx={{ mb: 4 }}>
+          <AlertTitle>Link Your Social Media Accounts</AlertTitle>
+          Attest your social media accounts by linking them to your wallet
+          address. This allows you to prove ownership over these accounts.
+        </Alert>
+        <CustomStepper steps={steps} activeStep={activeStep} />
 
-      {activeStep === 0 && (
-        <StepOne provider={provider} handleNextStep={handleNextStep} />
-      )}
-      {activeStep === 1 && (
-        <StepTwo
-          provider={provider}
-          handlePrepareAttestation={handlePrepareAttestation}
-        />
-      )}
-      {activeStep === 2 && <StepThree attestedSignutare={attestedSignutare} />}
-    </Paper>
+        {activeStep === 0 && (
+          <StepOne provider={provider} handleNextStep={handleNextStep} />
+        )}
+        {activeStep === 1 && (
+          <StepTwo
+            provider={provider}
+            handlePrepareAttestation={handlePrepareAttestation}
+          />
+        )}
+        {activeStep === 2 && (
+          <StepThree attestedSignutare={attestedSignutare} />
+        )}
+      </Paper>
+    </>
   );
 }