feat: pair div

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;
+`;