From 51a2ac628822e96459b3d570eada953ac8927d43 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Wed, 19 Jan 2022 21:27:21 +0100
Subject: Added boostrap

---
 src/components/Details/Details.tsx | 254 +++++++++++++++++++++++++------------
 1 file changed, 176 insertions(+), 78 deletions(-)

(limited to 'src/components/Details/Details.tsx')

diff --git a/src/components/Details/Details.tsx b/src/components/Details/Details.tsx
index e91c98c..c96aa7b 100644
--- a/src/components/Details/Details.tsx
+++ b/src/components/Details/Details.tsx
@@ -10,6 +10,16 @@ import RequestSummary from "../RequestSummary/RequestSummary";
 import classNames from 'classnames';
 import Content from "../Content/Content";
 import {getHost} from "../../utils";
+import {
+  Button,
+  Card,
+  Col,
+  Container,
+  Nav,
+  NavItem,
+  Row,
+  Table
+} from "react-bootstrap";
 
 
 interface TimingProps {
@@ -39,17 +49,31 @@ interface HeadersProps {
 
 function Headers({ title, headers }: HeadersProps) {
   return (
-    <div className={styles.headers}>
-      <h2>{ title }</h2>
-      {
-        Object.entries(headers).map(([key, value]) => (
-          <>
-            <div>{key}</div>
-            <div>{value}</div>
-          </>
-        ))
-      }
-    </div>
+    <Card className="m-3">
+        <Table
+          striped
+          responsive
+          borderless
+          hover
+          className='mb-0'
+        >
+          <thead>
+            <tr>
+              <th colSpan={2} className="bg-dark text-white rounded-top">{ title }</th>
+            </tr>
+          </thead>
+          <tbody>
+          {
+            Object.entries(headers).map(([key, value]) => (
+              <tr>
+                <td>{key}</td>
+                <td>{value}</td>
+              </tr>
+            ))
+          }
+          </tbody>
+        </Table>
+    </Card>
   )
 }
 
@@ -75,73 +99,147 @@ export default function Details({ requestResponse }: DetailsProps) {
   ), [requestResponse]);
 
   return (
-    <div className={styles.details}>
-      <div className={styles.header}>
-        <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
-
-        <div className={styles.tabs}>
-          <button
-            onClick={() => selectTab('headers')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'headers'
-            })}
-          >
-            Headers
-          </button>
-          <button
-            onClick={() => selectTab('request')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'request'
-            })}
+    <>
+      <Row>
+        <Col>
+          <Container fluid style={{ fontSize: '1.5em' }} className="py-3">
+            <RequestSummary requestResponse={requestResponse} className={styles.summary}/>
+          </Container>
+        </Col>
+      </Row>
+      <Row className="gx-0 d-flex">
+        <Col>
+          <Nav
+            variant="tabs"
+            activeKey={tab}
+            onSelect={(tab) => selectTab(tab as Tab)}
           >
-            Request
-          </button>
-          <button
-            onClick={() => selectTab('response')}
-            className={classNames(styles.tab, {
-              [styles.selected]: tab === 'response'
-            })}
-            disabled={requestResponse.response === undefined}
-          >
-            Response
-          </button>
-
-          <div className={styles.emptySpace}>
-            <Timing timing={requestResponse.response?.timing ?? NaN} />
-            <button className={styles.resend} onClick={() => resend()}>Resend</button>
-          </div>
-        </div>
-      </div>
-      <div className={styles.content}>
-        {
-          tab === 'headers' && (
-            <>
-              <Headers
-                title="Request Headers"
-                headers={requestResponse.request.headers}
-              />
-              {
-                requestResponse.response && (
-                  <Headers
-                    title="Response Headers"
-                    headers={requestResponse.response.headers}
-                  />
-                )
-              }
-            </>
-          )
-        }
-        {
-          tab === 'request' && (
-            <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
-          )
-        }
-        {
-          tab === 'response' && requestResponse.response !== undefined && (
-            <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
-          )
-        }
-      </div>
-    </div>
+            <Nav.Item>
+              <Nav.Link eventKey="headers">
+                Headers
+              </Nav.Link >
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link eventKey="request">
+                Request
+              </Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                eventKey="response"
+                disabled={requestResponse.response === undefined}
+              >
+                Response
+              </Nav.Link>
+            </Nav.Item>
+          </Nav>
+        </Col>
+        <Col className="border-bottom px-3 " xs="auto">
+          <Timing timing={requestResponse.response?.timing ?? NaN} />
+          <Button variant="outline-primary" onClick={() => resend()} className="ms-3">
+            Resend
+          </Button>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          {
+            tab === 'headers' && (
+              <>
+                <Headers
+                  title="Request Headers"
+                  headers={requestResponse.request.headers}
+                />
+                {
+                  requestResponse.response && (
+                    <Headers
+                      title="Response Headers"
+                      headers={requestResponse.response.headers}
+                    />
+                  )
+                }
+              </>
+            )
+          }
+          {
+            tab === 'request' && (
+              <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
+            )
+          }
+          {
+            tab === 'response' && requestResponse.response !== undefined && (
+              <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
+            )
+          }
+        </Col>
+      </Row>
+    </>
+    // <div className={styles.details}>
+    //   <div className={styles.header}>
+    //
+    //     <div className={styles.tabs}>
+    //       <button
+    //         onClick={() => selectTab('headers')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'headers'
+    //         })}
+    //       >
+    //         Headers
+    //       </button>
+    //       <button
+    //         onClick={() => selectTab('request')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'request'
+    //         })}
+    //       >
+    //         Request
+    //       </button>
+    //       <button
+    //         onClick={() => selectTab('response')}
+    //         className={classNames(styles.tab, {
+    //           [styles.selected]: tab === 'response'
+    //         })}
+    //         disabled={requestResponse.response === undefined}
+    //       >
+    //         Response
+    //       </button>
+    //
+    //       <div className={styles.emptySpace}>
+    //         <Timing timing={requestResponse.response?.timing ?? NaN} />
+    //         <button className={styles.resend} onClick={() => resend()}>Resend</button>
+    //       </div>
+    //     </div>
+    //   </div>
+    //   <div className={styles.content}>
+    //     {
+    //       tab === 'headers' && (
+    //         <>
+    //           <Headers
+    //             title="Request Headers"
+    //             headers={requestResponse.request.headers}
+    //           />
+    //           {
+    //             requestResponse.response && (
+    //               <Headers
+    //                 title="Response Headers"
+    //                 headers={requestResponse.response.headers}
+    //               />
+    //             )
+    //           }
+    //         </>
+    //       )
+    //     }
+    //     {
+    //       tab === 'request' && (
+    //         <Content data={requestResponse.request} raw={raw} setRaw={setRaw}/>
+    //       )
+    //     }
+    //     {
+    //       tab === 'response' && requestResponse.response !== undefined && (
+    //         <Content data={requestResponse.response} raw={raw} setRaw={setRaw}/>
+    //       )
+    //     }
+    //   </div>
+    // </div>
   )
 }
-- 
cgit v1.2.3