From 6076567b88fba75ed0627020fd579ff30f78b049 Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Wed, 17 Jul 2024 20:51:12 +0530
Subject: [PATCH 1/6] errorBoundary Component

Signed-off-by: aayushdhiman01 <aayushdhiman85@gmail.com>
---
 .../sistent/components/error-boundary/code.js |   9 +
 .../components/error-boundary/index.js        |   9 +
 .../error-boundary/ErrorBoundary.tsx          | 106 ++++++++++
 .../components/error-boundary/README.md       |  85 ++++++++
 .../Sistent/components/error-boundary/code.js | 189 ++++++++++++++++++
 .../components/error-boundary/index.js        | 159 +++++++++++++++
 .../components/error-boundary/index.tsx       |   6 +
 .../Projects/Sistent/components/index.js      |   7 +
 8 files changed, 570 insertions(+)
 create mode 100644 src/pages/projects/sistent/components/error-boundary/code.js
 create mode 100644 src/pages/projects/sistent/components/error-boundary/index.js
 create mode 100644 src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
 create mode 100644 src/sections/Projects/Sistent/components/error-boundary/README.md
 create mode 100644 src/sections/Projects/Sistent/components/error-boundary/code.js
 create mode 100644 src/sections/Projects/Sistent/components/error-boundary/index.js
 create mode 100644 src/sections/Projects/Sistent/components/error-boundary/index.tsx

diff --git a/src/pages/projects/sistent/components/error-boundary/code.js b/src/pages/projects/sistent/components/error-boundary/code.js
new file mode 100644
index 000000000000..d23feaa4e6ac
--- /dev/null
+++ b/src/pages/projects/sistent/components/error-boundary/code.js
@@ -0,0 +1,9 @@
+import React from "react";
+import ErrorBoundaryCode from "../../../../../sections/Projects/Sistent/components/error-boundary/code";
+
+
+const ErrorBoundaryCodePage = () => {
+  return <ErrorBoundaryCode />;
+};
+
+export default ErrorBoundaryCodePage;
\ No newline at end of file
diff --git a/src/pages/projects/sistent/components/error-boundary/index.js b/src/pages/projects/sistent/components/error-boundary/index.js
new file mode 100644
index 000000000000..1f44e05b6b61
--- /dev/null
+++ b/src/pages/projects/sistent/components/error-boundary/index.js
@@ -0,0 +1,9 @@
+import React from "react";
+import SistentErrorBoundary from "../../../../../sections/Projects/Sistent/components/error-boundary";
+
+
+const SistentErrorBoundaryPage = () => {
+  return <SistentErrorBoundary />;
+};
+
+export default SistentErrorBoundaryPage;
\ No newline at end of file
diff --git a/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx b/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
new file mode 100644
index 000000000000..5134530702d1
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
@@ -0,0 +1,106 @@
+import { styled } from '@mui/material';
+import React from 'react';
+import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { Box } from '../../base/Box';
+import { Link } from '../../base/Link';
+import { Typography } from '../../base/Typography';
+
+const ErrorMessage = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.default,
+  fontWeight: 'normal',
+  marginTop: '2px',
+  marginBottom: '2px',
+  fontSize: '1.15rem'
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  color: theme.palette.border.brand,
+  textDecoration: 'underline',
+  cursor: 'pointer'
+}));
+
+const CodeMessage = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.code,
+  color: theme.palette.text.tertiary,
+  padding: '.85rem',
+  borderRadius: '.2rem',
+  marginBlock: '.5rem'
+}));
+
+interface FallbackComponentProps extends FallbackProps {
+  resetErrorBoundary: () => void;
+  children?: React.ReactNode;
+}
+
+export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
+  return (
+    <div role="alert">
+      <h2>Uh-oh!😔 Please pardon the mesh.</h2>
+      <CodeMessage>
+        <code>{(error as Error).message}</code>
+      </CodeMessage>
+      <ErrorMessage>
+        We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
+        work, please check out our support channels{' '}
+        <StyledLink href="https://discuss.layer5.io/" target="_blank" rel="noopener noreferrer">
+          Discuss Forum
+        </StyledLink>{' '}
+        {' or '}
+        <StyledLink href="https://slack.layer5.io/" target="_blank" rel="noopener noreferrer">
+          Slack
+        </StyledLink>
+      </ErrorMessage>
+      <Box>{children}</Box>
+    </div>
+  );
+}
+
+const reportError = (error: Error, info: React.ErrorInfo): void => {
+  // This is where you'd send the error to Sentry, etc
+  console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
+};
+
+interface ErrorBoundaryProps {
+  customFallback?: React.ComponentType<FallbackProps>;
+  children: React.ReactNode;
+}
+
+export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ customFallback, children }) => {
+  return (
+    <ReactErrorBoundary FallbackComponent={customFallback ?? Fallback} onError={reportError}>
+      {children}
+    </ReactErrorBoundary>
+  );
+};
+
+interface WithErrorBoundaryProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: React.ComponentType<any>;
+  errorHandlingProps?: ErrorBoundaryProps;
+}
+
+export const withErrorBoundary: React.FC<WithErrorBoundaryProps> = ({
+  Component,
+  errorHandlingProps = { children: null }
+}: WithErrorBoundaryProps): JSX.Element => {
+  return (
+    <ErrorBoundary {...errorHandlingProps}>
+      <Component />
+    </ErrorBoundary>
+  );
+};
+
+interface WithSuppressedErrorBoundaryProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component: React.ComponentType<any>;
+}
+
+export const withSuppressedErrorBoundary: React.FC<WithSuppressedErrorBoundaryProps> = ({
+  Component
+}: WithSuppressedErrorBoundaryProps): JSX.Element => {
+  return (
+    <ReactErrorBoundary FallbackComponent={() => null} onError={reportError}>
+      <Component />
+    </ReactErrorBoundary>
+  );
+};
diff --git a/src/sections/Projects/Sistent/components/error-boundary/README.md b/src/sections/Projects/Sistent/components/error-boundary/README.md
new file mode 100644
index 000000000000..0fed30e1b48d
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/error-boundary/README.md
@@ -0,0 +1,85 @@
+## Error Boundary Components
+
+### `ErrorBoundary`
+
+The `ErrorBoundary` component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
+
+#### Usage
+
+Wrap your component with the `ErrorBoundary`:
+
+```tsx
+import { ErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = () => {
+  // Your component logic
+
+  return <ErrorBoundary>{/* Your component JSX */}</ErrorBoundary>;
+};
+```
+
+##### Custom Fallback
+
+You can provide a custom fallback component to `ErrorBoundary`:
+
+```tsx
+const MyComponent = () => {
+  // Your component logic
+
+  return (
+    <ErrorBoundary customFallback={CustomFallbackComponent}>
+      {/* Your component JSX */}
+    </ErrorBoundary>
+  );
+};
+```
+
+### `withErrorBoundary`
+
+`withErrorBoundary` is a higher-order component (HOC) that simplifies wrapping a component with ErrorBoundary. It uses default fallback component. This can be useFul to wrap child components
+
+#### Usage
+
+Wrap your component using `withErrorBoundary`:
+
+```tsx
+import { withErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = withErrorBoundary(() => {
+  return {
+    /* Your component JSX */
+  };
+});
+```
+
+### `withSuppressedErrorBoundary`
+
+`withSuppressedErrorBoundary` is another HOC that suppresses the error in browser's console instead of displaying fallback component to users, this can be useFull for errors that are not critical and can be avoided.
+
+#### Usage
+
+Wrap your component using withSuppressedErrorBoundary:
+
+```tsx
+import { withSuppressedErrorBoundary } from '@layer5/sistent';
+
+const MyComponent = withSuppressedErrorBoundary(() => {
+  return {
+    /* Your component JSX */
+  };
+});
+```
+
+### Handling Different Levels of Errors
+
+#### Critical Errors
+
+Critical errors typically originate from parent or root components and can potentially lead to the entire page crashing. In such cases, it is recommended to use the ErrorBoundary with either the default fallback component or a custom fallback component to ensure users receive assistance.
+
+#### Non-critical Errors
+
+Non-critical errors occur in child components and may not result in a page crash or hinder users from performing other operations. In these cases, displaying the error through a toaster notification or handling it as an event can be beneficial.
+
+#### Errors That Can Be Avoided
+
+In some scenarios, a child component might encounter an error that doesn't block users and doesn't require immediate attention. Such errors can be avoided and suppressed into the browser's console for debugging purposes. The `withSuppressedErrorBoundary` higher-order component (HOC) function can be useful in this scenario.
diff --git a/src/sections/Projects/Sistent/components/error-boundary/code.js b/src/sections/Projects/Sistent/components/error-boundary/code.js
new file mode 100644
index 000000000000..5a6c53b09301
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/error-boundary/code.js
@@ -0,0 +1,189 @@
+import React from "react";
+import { SistentLayout } from "../../sistent-layout";
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  SistentThemeProvider,
+  ErrorBoundary,
+  Fallback,
+  withErrorBoundary,
+  withSuppressedErrorBoundary,
+  TextField,
+  Typography,
+} from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { useLocation } from "@reach/router";
+import { navigate } from "gatsby";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "../button/code-block";
+import { ActionBox } from "../../sistent.style";
+
+const CustomInput = ({ label, text, style }) => (
+  <Box style={{ marginBottom: "16px", ...style }}>
+    <Typography variant="subtitle1" gutterBottom>
+      {label}
+    </Typography>
+    <TextField
+      label={text}
+      variant="outlined"
+      style={{
+        width: "100%"
+      }}
+    />
+  </Box>
+);
+
+const codes = [
+  `import { withErrorBoundary } from '@layer5/sistent';
+  const MyComponent = () => {
+    // Your component logic
+
+      return <ErrorBoundary>{/* Your component JSX */}</ErrorBoundary>;
+  };`,
+  `const MyComponent = () => {
+    // Your component logic
+
+    return (
+      <ErrorBoundary customFallback={CustomFallbackComponent}>
+        {/* Your component JSX */}
+      </ErrorBoundary>
+    );
+  };`,
+  `import { withErrorBoundary } from '@layer5/sistent';
+    const MyComponent = withErrorBoundary(() => {
+      return {
+        /* Your component JSX */
+      };
+    });`,
+  `import { withSuppressedErrorBoundary } from '@layer5/sistent';
+    const MyComponent = withSuppressedErrorBoundary(() => {
+      return {
+        /* Your component JSX */
+      };
+    });`
+];
+
+export const ErrorBoundaryCode = () => {
+  const [open, setOpen] = useState(false);
+  const [actionOpen, setActionOpen] = useState(false);
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleActionOpen = () => {
+    setActionOpen(true);
+  };
+
+  const handleActionClose = () => {
+    setActionOpen(false);
+  };
+
+  return (
+    <SistentLayout title="ErrorBoundary">
+      <div className="content">
+        <a id="Identity">
+          <h2>ErrorBoundary</h2>
+        </a>
+        <p>
+        The ErrorBoundary component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/error-boundary"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/error-boundary")}
+            title="Overview"
+          />
+          {/* <TabButton
+            className={
+              location.pathname ===
+                "/projects/sistent/components/modal/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/modal/guidance")
+            }
+            title="Guidance"
+          /> */}
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/error-boundary/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/identity/color/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+            <a id="ErrorBoundary">
+              <h2>ErrorBoundary</h2>
+            </a>
+            <p>Wrap your component with the ErrorBoundary:</p>
+            <div className="showcase">
+              <div className="items">
+                <Button variant="contained" onClick={handleOpen}>
+                    Open ErrorBoundary
+                </Button>
+              </div>
+              <CodeBlock name="errorBoundary" code={codes[0]} />
+            </div>
+            <a id="Custom Fallback">
+              <h2>Custom Fallback</h2>
+            </a>
+            <p>You can provide a custom fallback component to ErrorBoundary:</p>
+            <div className="showcase">
+              <div className="items">
+                <Button variant="contained" onClick={handleOpen}>
+                  Open ErrorBoundary with CustomFallback
+                </Button>  
+              </div>
+              <CodeBlock name="customFallback" code={codes[1]} />
+            </div>
+            <a id="withErrorBoundary">
+              <h2>withErrorBoundary</h2>
+            </a>
+            <p>It is a higher-order component (HOC) that simplifies wrapping a component with ErrorBoundary. It uses default fallback component. This can be useFul to wrap child components.</p>
+            <p>Wrap your component using withErrorBoundary:</p>
+            <div className="showcase">
+              <div className="items">
+                <Button variant="contained" onClick={handleOpen}>
+                    Open withErrorBoundary
+                </Button>
+              </div>
+              <CodeBlock name="withErrorboundaryCode" code={codes[2]} />
+            </div>
+            <a id="withSuppressedErrorBoundary">
+              <h2>withSuppressedErrorBoundary</h2>
+            </a>
+            <p>withSuppressedErrorBoundary is another HOC that suppresses the error in browser's console instead of displaying fallback component to users, this can be useFull for errors that are not critical and can be avoided.</p>
+            <p>Wrap your component using withSuppressedErrorBoundary:</p>
+            <div className="showcase">
+              <div className="items">
+                <Button variant="contained" onClick={handleOpen}>
+                    Open withSuppressedErrorBoundary
+                </Button>
+              </div>
+              <CodeBlock name="withSuppressedErrorBoundaryCode" code={codes[3]} />
+            </div>
+          </SistentThemeProvider>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default ErrorBoundaryCode;
diff --git a/src/sections/Projects/Sistent/components/error-boundary/index.js b/src/sections/Projects/Sistent/components/error-boundary/index.js
new file mode 100644
index 000000000000..df588f0c550c
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/error-boundary/index.js
@@ -0,0 +1,159 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Button } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Col, Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentErrorBoundary = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Error Boundary">
+      <div className="content">
+        <a id="Identity">
+          <h2>Error Boundary</h2>
+        </a>
+        <p>
+        The ErrorBoundary component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/error-boundary"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/error-boundary")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/error-boundary/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/error-boundary/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">          
+          <a id="Types">
+            <h2>Error Boundary Components</h2>
+          </a>
+          <h3>ErrorBoundary</h3>
+          <p>
+          The ErrorBoundary component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
+          </p>
+          <h6>Usage</h6>
+          <h3>Outlined</h3>
+          <p>
+            Outlined buttons are buttons that do not have a fill, but have a
+            border or stroke to define its bounding box as well as a text label
+            to convey a thought for users to take action upon. Colors can also
+            be used to style these buttons in order to fit into the theme align
+            with brand guidelines.
+          </p>
+          <Row Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Button variant="outlined" label="Outlined" size="medium" />
+            </SistentThemeProvider>
+          </Row>
+          <h3>Text</h3>
+          <p>
+            Also known as ghost buttons, text buttons are mostly just what the
+            name implies; they are buttons without fills or borders which might
+            just have a specific text styling and color to denote different
+            states for easier identification.
+          </p>
+          <Row Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Button variant="text" label="Text" size="medium" />
+            </SistentThemeProvider>
+          </Row>
+          <a id="Sizes">
+            <h2>Sizes</h2>
+          </a>
+          <p>
+            For buttons to be fully effective, they can be adjusted in size to
+            accommodate multiple use cases where they may apply. These size
+            changes are usually done to the height of the buttons and not the
+            width since buttons usually grow to contain their content. The
+            height that makes up the different sizes of our buttons are gotten
+            from our spacing system to retain space consistency. We have chosen
+            two different sizes of buttons to provide options and more sizes can
+            be added to fill the growing needs.
+          </p>
+          <h3>56px / 3.5rem</h3>
+          <p>
+            The 56px button is the first button size. It is currently the
+            largest button available for use and it is available for both mobile
+            and desktop resolutions, but it serves in different capacities
+            across these different resolutions.
+          </p>
+          <Row Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Button variant="contained" label="56px / 3.5rem" size="large" />
+            </SistentThemeProvider>
+          </Row>
+          <h3>48px / 3rem</h3>
+          <p>
+            The 48px button is the second button size currently in use and it is
+            available from mobile to desktop resolutions, even though it serves
+            in different capacities across these screen sizes.
+          </p>
+          <Row Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Button variant="contained" label="48px / 3rem" size="medium" />
+            </SistentThemeProvider>
+          </Row>
+          <h3>Full width</h3>
+          <p>
+            Full width buttons are more efficient in mobile designs and rightly
+            so in order to offer users with a wider touch area since the input
+            devices - the fingers, are a lot larger than the cursor on a desktop
+            or larger screen.
+          </p>
+          <Row Hcenter className="image-container">
+            <Col sm={12}>
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Button variant="contained" label="Full width" fullWidth />
+              </SistentThemeProvider>
+            </Col>
+          </Row>
+          <p>
+            <strong>NOTE:</strong>
+          </p>
+          <p>
+            These sizes are being specified with numerical values because though
+            the same size is used across screen resolutions, they have different
+            roles. On desktop for instance, the 56px button is a the default
+            size, and 48px the small size, while on mobile, 56px is large and
+            48px is the default size. Preferred button sizes (height) are
+            usually arrived at through exploration and proper consideration of
+            industry standards and best practices.
+          </p>
+          <a id="Adding Icons">
+            <h2>Adding Icons</h2>
+          </a>
+          <p>
+            Sometimes, icons are used alongside labels in buttons to pass across
+            specific information or relay added information for a higher level
+            of understanding and better comprehension. Depending on the
+            information being conveyed, the icons can be placed on the left side
+            of the label text or on the right side of the label text. No
+            specific rules apply apart from spacing tips which may be considered
+            here. For full width buttons, if icons must be added, they should be
+            centered in the button alongside the label text.
+          </p>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentErrorBoundary;
diff --git a/src/sections/Projects/Sistent/components/error-boundary/index.tsx b/src/sections/Projects/Sistent/components/error-boundary/index.tsx
new file mode 100644
index 000000000000..f4b09c8c0aa5
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/error-boundary/index.tsx
@@ -0,0 +1,6 @@
+export {
+  ErrorBoundary,
+  Fallback,
+  withErrorBoundary,
+  withSuppressedErrorBoundary
+} from './ErrorBoundary';
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index ce9cb2768f06..6792f53df0aa 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -29,6 +29,13 @@ const componentsData = [
       "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
     url: "/projects/sistent/components/modal",
   },
+  {
+    id: 4,
+    name: "Error Boundary",
+    description:
+      "The ErrorBoundary component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.",
+    url: "/projects/sistent/components/error-boundary"
+  }
 ];
 
 const SistentComponents = () => {

From 8d8c2936b71e65d50d9615270b922fe236982840 Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Wed, 17 Jul 2024 20:55:12 +0530
Subject: [PATCH 2/6] added errorBoundaryComponent

---
 .../Sistent/components/error-boundary/code.js |   2 +-
 .../components/error-boundary/index.js        | 103 +-----------------
 2 files changed, 3 insertions(+), 102 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/error-boundary/code.js b/src/sections/Projects/Sistent/components/error-boundary/code.js
index 5a6c53b09301..3bc4af764e1c 100644
--- a/src/sections/Projects/Sistent/components/error-boundary/code.js
+++ b/src/sections/Projects/Sistent/components/error-boundary/code.js
@@ -149,7 +149,7 @@ export const ErrorBoundaryCode = () => {
               <div className="items">
                 <Button variant="contained" onClick={handleOpen}>
                   Open ErrorBoundary with CustomFallback
-                </Button>  
+                </Button>
               </div>
               <CodeBlock name="customFallback" code={codes[1]} />
             </div>
diff --git a/src/sections/Projects/Sistent/components/error-boundary/index.js b/src/sections/Projects/Sistent/components/error-boundary/index.js
index df588f0c550c..87b1b7feda84 100644
--- a/src/sections/Projects/Sistent/components/error-boundary/index.js
+++ b/src/sections/Projects/Sistent/components/error-boundary/index.js
@@ -41,7 +41,7 @@ const SistentErrorBoundary = () => {
             title="Code"
           />
         </div>
-        <div className="main-content">          
+        <div className="main-content">
           <a id="Types">
             <h2>Error Boundary Components</h2>
           </a>
@@ -50,106 +50,7 @@ const SistentErrorBoundary = () => {
           The ErrorBoundary component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
           </p>
           <h6>Usage</h6>
-          <h3>Outlined</h3>
-          <p>
-            Outlined buttons are buttons that do not have a fill, but have a
-            border or stroke to define its bounding box as well as a text label
-            to convey a thought for users to take action upon. Colors can also
-            be used to style these buttons in order to fit into the theme align
-            with brand guidelines.
-          </p>
-          <Row Hcenter className="image-container">
-            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Button variant="outlined" label="Outlined" size="medium" />
-            </SistentThemeProvider>
-          </Row>
-          <h3>Text</h3>
-          <p>
-            Also known as ghost buttons, text buttons are mostly just what the
-            name implies; they are buttons without fills or borders which might
-            just have a specific text styling and color to denote different
-            states for easier identification.
-          </p>
-          <Row Hcenter className="image-container">
-            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Button variant="text" label="Text" size="medium" />
-            </SistentThemeProvider>
-          </Row>
-          <a id="Sizes">
-            <h2>Sizes</h2>
-          </a>
-          <p>
-            For buttons to be fully effective, they can be adjusted in size to
-            accommodate multiple use cases where they may apply. These size
-            changes are usually done to the height of the buttons and not the
-            width since buttons usually grow to contain their content. The
-            height that makes up the different sizes of our buttons are gotten
-            from our spacing system to retain space consistency. We have chosen
-            two different sizes of buttons to provide options and more sizes can
-            be added to fill the growing needs.
-          </p>
-          <h3>56px / 3.5rem</h3>
-          <p>
-            The 56px button is the first button size. It is currently the
-            largest button available for use and it is available for both mobile
-            and desktop resolutions, but it serves in different capacities
-            across these different resolutions.
-          </p>
-          <Row Hcenter className="image-container">
-            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Button variant="contained" label="56px / 3.5rem" size="large" />
-            </SistentThemeProvider>
-          </Row>
-          <h3>48px / 3rem</h3>
-          <p>
-            The 48px button is the second button size currently in use and it is
-            available from mobile to desktop resolutions, even though it serves
-            in different capacities across these screen sizes.
-          </p>
-          <Row Hcenter className="image-container">
-            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <Button variant="contained" label="48px / 3rem" size="medium" />
-            </SistentThemeProvider>
-          </Row>
-          <h3>Full width</h3>
-          <p>
-            Full width buttons are more efficient in mobile designs and rightly
-            so in order to offer users with a wider touch area since the input
-            devices - the fingers, are a lot larger than the cursor on a desktop
-            or larger screen.
-          </p>
-          <Row Hcenter className="image-container">
-            <Col sm={12}>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <Button variant="contained" label="Full width" fullWidth />
-              </SistentThemeProvider>
-            </Col>
-          </Row>
-          <p>
-            <strong>NOTE:</strong>
-          </p>
-          <p>
-            These sizes are being specified with numerical values because though
-            the same size is used across screen resolutions, they have different
-            roles. On desktop for instance, the 56px button is a the default
-            size, and 48px the small size, while on mobile, 56px is large and
-            48px is the default size. Preferred button sizes (height) are
-            usually arrived at through exploration and proper consideration of
-            industry standards and best practices.
-          </p>
-          <a id="Adding Icons">
-            <h2>Adding Icons</h2>
-          </a>
-          <p>
-            Sometimes, icons are used alongside labels in buttons to pass across
-            specific information or relay added information for a higher level
-            of understanding and better comprehension. Depending on the
-            information being conveyed, the icons can be placed on the left side
-            of the label text or on the right side of the label text. No
-            specific rules apply apart from spacing tips which may be considered
-            here. For full width buttons, if icons must be added, they should be
-            centered in the button alongside the label text.
-          </p>
+
         </div>
       </div>
     </SistentLayout>

From cb84d8615e157af66fb3a7d9a49282f625481340 Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Sat, 20 Jul 2024 17:01:09 +0530
Subject: [PATCH 3/6] removed action box

---
 .../error-boundary/ErrorBoundary.tsx          | 106 ------------------
 .../components/error-boundary/README.md       |  85 --------------
 .../Sistent/components/error-boundary/code.js |  27 -----
 .../components/error-boundary/index.tsx       |   6 -
 4 files changed, 224 deletions(-)
 delete mode 100644 src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
 delete mode 100644 src/sections/Projects/Sistent/components/error-boundary/README.md
 delete mode 100644 src/sections/Projects/Sistent/components/error-boundary/index.tsx

diff --git a/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx b/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
deleted file mode 100644
index 5134530702d1..000000000000
--- a/src/sections/Projects/Sistent/components/error-boundary/ErrorBoundary.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { styled } from '@mui/material';
-import React from 'react';
-import { FallbackProps, ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-import { Box } from '../../base/Box';
-import { Link } from '../../base/Link';
-import { Typography } from '../../base/Typography';
-
-const ErrorMessage = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.default,
-  fontWeight: 'normal',
-  marginTop: '2px',
-  marginBottom: '2px',
-  fontSize: '1.15rem'
-}));
-
-const StyledLink = styled(Link)(({ theme }) => ({
-  color: theme.palette.border.brand,
-  textDecoration: 'underline',
-  cursor: 'pointer'
-}));
-
-const CodeMessage = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.code,
-  color: theme.palette.text.tertiary,
-  padding: '.85rem',
-  borderRadius: '.2rem',
-  marginBlock: '.5rem'
-}));
-
-interface FallbackComponentProps extends FallbackProps {
-  resetErrorBoundary: () => void;
-  children?: React.ReactNode;
-}
-
-export function Fallback({ error, children }: FallbackComponentProps): JSX.Element {
-  return (
-    <div role="alert">
-      <h2>Uh-oh!😔 Please pardon the mesh.</h2>
-      <CodeMessage>
-        <code>{(error as Error).message}</code>
-      </CodeMessage>
-      <ErrorMessage>
-        We apologize for the inconvenience. The issue may be on our end. If troubleshooting doesn't
-        work, please check out our support channels{' '}
-        <StyledLink href="https://discuss.layer5.io/" target="_blank" rel="noopener noreferrer">
-          Discuss Forum
-        </StyledLink>{' '}
-        {' or '}
-        <StyledLink href="https://slack.layer5.io/" target="_blank" rel="noopener noreferrer">
-          Slack
-        </StyledLink>
-      </ErrorMessage>
-      <Box>{children}</Box>
-    </div>
-  );
-}
-
-const reportError = (error: Error, info: React.ErrorInfo): void => {
-  // This is where you'd send the error to Sentry, etc
-  console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
-};
-
-interface ErrorBoundaryProps {
-  customFallback?: React.ComponentType<FallbackProps>;
-  children: React.ReactNode;
-}
-
-export const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ customFallback, children }) => {
-  return (
-    <ReactErrorBoundary FallbackComponent={customFallback ?? Fallback} onError={reportError}>
-      {children}
-    </ReactErrorBoundary>
-  );
-};
-
-interface WithErrorBoundaryProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component: React.ComponentType<any>;
-  errorHandlingProps?: ErrorBoundaryProps;
-}
-
-export const withErrorBoundary: React.FC<WithErrorBoundaryProps> = ({
-  Component,
-  errorHandlingProps = { children: null }
-}: WithErrorBoundaryProps): JSX.Element => {
-  return (
-    <ErrorBoundary {...errorHandlingProps}>
-      <Component />
-    </ErrorBoundary>
-  );
-};
-
-interface WithSuppressedErrorBoundaryProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component: React.ComponentType<any>;
-}
-
-export const withSuppressedErrorBoundary: React.FC<WithSuppressedErrorBoundaryProps> = ({
-  Component
-}: WithSuppressedErrorBoundaryProps): JSX.Element => {
-  return (
-    <ReactErrorBoundary FallbackComponent={() => null} onError={reportError}>
-      <Component />
-    </ReactErrorBoundary>
-  );
-};
diff --git a/src/sections/Projects/Sistent/components/error-boundary/README.md b/src/sections/Projects/Sistent/components/error-boundary/README.md
deleted file mode 100644
index 0fed30e1b48d..000000000000
--- a/src/sections/Projects/Sistent/components/error-boundary/README.md
+++ /dev/null
@@ -1,85 +0,0 @@
-## Error Boundary Components
-
-### `ErrorBoundary`
-
-The `ErrorBoundary` component is designed to catch errors that occur within its child components and provide a customizable fallback UI when an error occurs.
-
-#### Usage
-
-Wrap your component with the `ErrorBoundary`:
-
-```tsx
-import { ErrorBoundary } from '@layer5/sistent';
-
-const MyComponent = () => {
-  // Your component logic
-
-  return <ErrorBoundary>{/* Your component JSX */}</ErrorBoundary>;
-};
-```
-
-##### Custom Fallback
-
-You can provide a custom fallback component to `ErrorBoundary`:
-
-```tsx
-const MyComponent = () => {
-  // Your component logic
-
-  return (
-    <ErrorBoundary customFallback={CustomFallbackComponent}>
-      {/* Your component JSX */}
-    </ErrorBoundary>
-  );
-};
-```
-
-### `withErrorBoundary`
-
-`withErrorBoundary` is a higher-order component (HOC) that simplifies wrapping a component with ErrorBoundary. It uses default fallback component. This can be useFul to wrap child components
-
-#### Usage
-
-Wrap your component using `withErrorBoundary`:
-
-```tsx
-import { withErrorBoundary } from '@layer5/sistent';
-
-const MyComponent = withErrorBoundary(() => {
-  return {
-    /* Your component JSX */
-  };
-});
-```
-
-### `withSuppressedErrorBoundary`
-
-`withSuppressedErrorBoundary` is another HOC that suppresses the error in browser's console instead of displaying fallback component to users, this can be useFull for errors that are not critical and can be avoided.
-
-#### Usage
-
-Wrap your component using withSuppressedErrorBoundary:
-
-```tsx
-import { withSuppressedErrorBoundary } from '@layer5/sistent';
-
-const MyComponent = withSuppressedErrorBoundary(() => {
-  return {
-    /* Your component JSX */
-  };
-});
-```
-
-### Handling Different Levels of Errors
-
-#### Critical Errors
-
-Critical errors typically originate from parent or root components and can potentially lead to the entire page crashing. In such cases, it is recommended to use the ErrorBoundary with either the default fallback component or a custom fallback component to ensure users receive assistance.
-
-#### Non-critical Errors
-
-Non-critical errors occur in child components and may not result in a page crash or hinder users from performing other operations. In these cases, displaying the error through a toaster notification or handling it as an event can be beneficial.
-
-#### Errors That Can Be Avoided
-
-In some scenarios, a child component might encounter an error that doesn't block users and doesn't require immediate attention. Such errors can be avoided and suppressed into the browser's console for debugging purposes. The `withSuppressedErrorBoundary` higher-order component (HOC) function can be useful in this scenario.
diff --git a/src/sections/Projects/Sistent/components/error-boundary/code.js b/src/sections/Projects/Sistent/components/error-boundary/code.js
index 3bc4af764e1c..281eb19085bf 100644
--- a/src/sections/Projects/Sistent/components/error-boundary/code.js
+++ b/src/sections/Projects/Sistent/components/error-boundary/code.js
@@ -17,22 +17,7 @@ import { useLocation } from "@reach/router";
 import { navigate } from "gatsby";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import { CodeBlock } from "../button/code-block";
-import { ActionBox } from "../../sistent.style";
 
-const CustomInput = ({ label, text, style }) => (
-  <Box style={{ marginBottom: "16px", ...style }}>
-    <Typography variant="subtitle1" gutterBottom>
-      {label}
-    </Typography>
-    <TextField
-      label={text}
-      variant="outlined"
-      style={{
-        width: "100%"
-      }}
-    />
-  </Box>
-);
 
 const codes = [
   `import { withErrorBoundary } from '@layer5/sistent';
@@ -74,18 +59,6 @@ export const ErrorBoundaryCode = () => {
     setOpen(true);
   };
 
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleActionOpen = () => {
-    setActionOpen(true);
-  };
-
-  const handleActionClose = () => {
-    setActionOpen(false);
-  };
-
   return (
     <SistentLayout title="ErrorBoundary">
       <div className="content">
diff --git a/src/sections/Projects/Sistent/components/error-boundary/index.tsx b/src/sections/Projects/Sistent/components/error-boundary/index.tsx
deleted file mode 100644
index f4b09c8c0aa5..000000000000
--- a/src/sections/Projects/Sistent/components/error-boundary/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-  ErrorBoundary,
-  Fallback,
-  withErrorBoundary,
-  withSuppressedErrorBoundary
-} from './ErrorBoundary';

From 4aa6644679a90d739702449b0104a026cb5f1f6f Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Mon, 22 Jul 2024 13:16:52 +0530
Subject: [PATCH 4/6] added error boundary code

---
 .../Sistent/components/error-boundary/code.js | 64 +++++++++++++------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/error-boundary/code.js b/src/sections/Projects/Sistent/components/error-boundary/code.js
index 281eb19085bf..3a02628a29af 100644
--- a/src/sections/Projects/Sistent/components/error-boundary/code.js
+++ b/src/sections/Projects/Sistent/components/error-boundary/code.js
@@ -2,14 +2,12 @@ import React from "react";
 import { SistentLayout } from "../../sistent-layout";
 import { useState } from "react";
 import {
-  Box,
   Button,
   SistentThemeProvider,
   ErrorBoundary,
   Fallback,
   withErrorBoundary,
   withSuppressedErrorBoundary,
-  TextField,
   Typography,
 } from "@layer5/sistent";
 import TabButton from "../../../../../reusecore/Button";
@@ -20,7 +18,7 @@ import { CodeBlock } from "../button/code-block";
 
 
 const codes = [
-  `import { withErrorBoundary } from '@layer5/sistent';
+  `import { ErrorBoundary } from '@layer5/sistent';
   const MyComponent = () => {
     // Your component logic
 
@@ -49,16 +47,37 @@ const codes = [
     });`
 ];
 
+function trigerError(){
+  throw new Error("This is a deliberate error!");
+}
+
+const ErrorThrowingComponent = () => {
+  const triggerError = () => {
+    throw new Error("This is a deliberate error!");
+  };
+
+  return (
+    <div>
+      <Button variant="contained" onClick={triggerError}>
+        Open ErrorBoundary
+      </Button>
+    </div>
+  );
+};
+
+const CustomFallbackComponent = () => {
+  return (
+    <div>
+      <h2>Custom Fallback Component</h2>
+    </div>
+  );
+};
+
+
 export const ErrorBoundaryCode = () => {
-  const [open, setOpen] = useState(false);
-  const [actionOpen, setActionOpen] = useState(false);
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
   return (
     <SistentLayout title="ErrorBoundary">
       <div className="content">
@@ -108,9 +127,15 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component with the ErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <Button variant="contained" onClick={handleOpen}>
-                    Open ErrorBoundary
-                </Button>
+                {/* <ErrorBoundary>{
+                  <Button variant="contained" onClick={trigerError}>
+                  Open ErrorBoundary
+                  </Button>
+                }</ErrorBoundary> */}
+                <ErrorBoundary>
+                  <ErrorThrowingComponent/>
+                </ErrorBoundary>
+                {/* <MyComponent/> */}
               </div>
               <CodeBlock name="errorBoundary" code={codes[0]} />
             </div>
@@ -120,9 +145,11 @@ export const ErrorBoundaryCode = () => {
             <p>You can provide a custom fallback component to ErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <Button variant="contained" onClick={handleOpen}>
-                  Open ErrorBoundary with CustomFallback
-                </Button>
+                <ErrorBoundary  Fallback={CustomFallbackComponent}>{
+                  <Button variant="contained" onClick={trigerError}>
+                  Open ErrorBoundary with Custom Fallback
+                  </Button>
+                }</ErrorBoundary>
               </div>
               <CodeBlock name="customFallback" code={codes[1]} />
             </div>
@@ -133,9 +160,8 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component using withErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <Button variant="contained" onClick={handleOpen}>
-                    Open withErrorBoundary
-                </Button>
+                {/* <MyComponent/> */}
+                <Button variant="contained" onClick={trigerError}>Error</Button>
               </div>
               <CodeBlock name="withErrorboundaryCode" code={codes[2]} />
             </div>
@@ -146,7 +172,7 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component using withSuppressedErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <Button variant="contained" onClick={handleOpen}>
+                <Button variant="contained" onClick={trigerError}>
                     Open withSuppressedErrorBoundary
                 </Button>
               </div>

From b8e865f09cf575b832abb66d31f200b3174973c5 Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Mon, 22 Jul 2024 23:16:38 +0530
Subject: [PATCH 5/6] showing errorBoundaryComponent

---
 .../Sistent/components/error-boundary/code.js | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/sections/Projects/Sistent/components/error-boundary/code.js b/src/sections/Projects/Sistent/components/error-boundary/code.js
index 3a02628a29af..e58687f0ba1d 100644
--- a/src/sections/Projects/Sistent/components/error-boundary/code.js
+++ b/src/sections/Projects/Sistent/components/error-boundary/code.js
@@ -5,10 +5,8 @@ import {
   Button,
   SistentThemeProvider,
   ErrorBoundary,
-  Fallback,
   withErrorBoundary,
   withSuppressedErrorBoundary,
-  Typography,
 } from "@layer5/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { useLocation } from "@reach/router";
@@ -47,15 +45,20 @@ const codes = [
     });`
 ];
 
-function trigerError(){
-  throw new Error("This is a deliberate error!");
+function MyComponent() {
+  // Simulate an error for demonstration purposes
+  if (Math.random() > 0.5) {
+    throw new Error("An error occurred in MyComponent");
+  }
+
+  // Component logic here
+  return <div>This is MyComponent</div>;
 }
 
 const ErrorThrowingComponent = () => {
   const triggerError = () => {
     throw new Error("This is a deliberate error!");
   };
-
   return (
     <div>
       <Button variant="contained" onClick={triggerError}>
@@ -68,15 +71,16 @@ const ErrorThrowingComponent = () => {
 const CustomFallbackComponent = () => {
   return (
     <div>
-      <h2>Custom Fallback Component</h2>
+      <h2>This is the Custom Fallback Component !!</h2>
     </div>
   );
 };
 
-
 export const ErrorBoundaryCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
+  // const WrappedComponent = withErrorBoundary(ErrorThrowingComponent());
+  // const SuppressedComponent = withSuppressedErrorBoundary({ Component: ErrorThrowingComponent });
 
   return (
     <SistentLayout title="ErrorBoundary">
@@ -127,15 +131,9 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component with the ErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                {/* <ErrorBoundary>{
-                  <Button variant="contained" onClick={trigerError}>
-                  Open ErrorBoundary
-                  </Button>
-                }</ErrorBoundary> */}
                 <ErrorBoundary>
-                  <ErrorThrowingComponent/>
+                  <MyComponent/>
                 </ErrorBoundary>
-                {/* <MyComponent/> */}
               </div>
               <CodeBlock name="errorBoundary" code={codes[0]} />
             </div>
@@ -145,11 +143,9 @@ export const ErrorBoundaryCode = () => {
             <p>You can provide a custom fallback component to ErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <ErrorBoundary  Fallback={CustomFallbackComponent}>{
-                  <Button variant="contained" onClick={trigerError}>
-                  Open ErrorBoundary with Custom Fallback
-                  </Button>
-                }</ErrorBoundary>
+                <ErrorBoundary customFallback={CustomFallbackComponent}>
+                  <MyComponent />
+                </ErrorBoundary>
               </div>
               <CodeBlock name="customFallback" code={codes[1]} />
             </div>
@@ -160,8 +156,7 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component using withErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                {/* <MyComponent/> */}
-                <Button variant="contained" onClick={trigerError}>Error</Button>
+                {/* <WrappedComponent/>  */}
               </div>
               <CodeBlock name="withErrorboundaryCode" code={codes[2]} />
             </div>
@@ -172,9 +167,9 @@ export const ErrorBoundaryCode = () => {
             <p>Wrap your component using withSuppressedErrorBoundary:</p>
             <div className="showcase">
               <div className="items">
-                <Button variant="contained" onClick={trigerError}>
+                {/* <Button variant="contained" onClick={trigerError}>
                     Open withSuppressedErrorBoundary
-                </Button>
+                </Button> */}
               </div>
               <CodeBlock name="withSuppressedErrorBoundaryCode" code={codes[3]} />
             </div>

From 6ea6b70026aa8437a3363d9d73d11e3f6b187d1b Mon Sep 17 00:00:00 2001
From: aayushdhiman01 <aayushdhiman85@gmail.com>
Date: Mon, 22 Jul 2024 23:43:16 +0530
Subject: [PATCH 6/6] fix-indent

---
 src/sections/Projects/Sistent/components/button/code-block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Projects/Sistent/components/button/code-block.js b/src/sections/Projects/Sistent/components/button/code-block.js
index e3831a70b6b0..b3e4945c40e5 100644
--- a/src/sections/Projects/Sistent/components/button/code-block.js
+++ b/src/sections/Projects/Sistent/components/button/code-block.js
@@ -11,7 +11,7 @@ export const CodeBlock = ({ name, code }) => {
       <label htmlFor={name} className="label">
         Show Code
       </label>
-       {showCode && (
+      {showCode && (
         <Code codeString={code} language="javascript" />
       )}
     </div>