From a1a4aa00b74047380ae9dea876c9bc47f7ecda81 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 15 Jun 2024 21:03:59 +0530
Subject: [PATCH] feat: pair div

---
 src/components/atoms/PairDisplayDiv.tsx | 42 +++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/atoms/PairDisplayDiv.tsx

diff --git a/src/components/atoms/PairDisplayDiv.tsx b/src/components/atoms/PairDisplayDiv.tsx
new file mode 100644
index 00000000..10d88ab4
--- /dev/null
+++ b/src/components/atoms/PairDisplayDiv.tsx
@@ -0,0 +1,42 @@
+import React, { FC } from 'react';
+import Typography from '@mui/material/Typography';
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import styled from "styled-components";
+
+interface PairDisplayDivProps {
+  index: string;
+  pair: WhereWhatPair;
+}
+
+export const PairDisplayDiv: FC<PairDisplayDivProps> = ({index, pair}) => {
+
+  return (
+    <div>
+      <Typography sx={{ marginBottom: '10px', marginTop: '25px'}} id="pair-index" variant="h6" component="h2">
+        {`Index: ${index}`}
+        { pair.id ? `, Id: ${pair.id}` : ''}
+      </Typography>
+      <Typography id="where-title" variant="h6" component="h2">
+        {"Where:"}
+      </Typography>
+      <DescriptionWrapper id="where-description">
+        <pre>{JSON.stringify(pair?.where, undefined, 2)}</pre>
+      </DescriptionWrapper>
+      <Typography id="what-title" variant="h6" component="h2">
+        {"What:"}
+      </Typography>
+      <DescriptionWrapper id="what-description">
+        <pre>{JSON.stringify(pair?.what,undefined, 2)}</pre>
+      </DescriptionWrapper>
+    </div>
+  );
+}
+
+const DescriptionWrapper = styled.div`
+  margin: 0;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+`;