feat: response status, time, size placeholders

packages/grafnode-components/src/components/ResponsePane/ResponseSize/StyledWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(117 117 117);
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/ResponsePane/ResponseSize/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseSize = () => {
+  return (
+    <StyledWrapper className="mt-4 ml-4">
+      8.31KB
+    </StyledWrapper>
+  )
+};
+export default ResponseSize;

packages/grafnode-components/src/components/ResponsePane/ResponseTime/StyledWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgb(117 117 117);
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/ResponsePane/ResponseTime/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseTime = () => {
+  return (
+    <StyledWrapper className="mt-4 ml-4">
+      2.8s
+    </StyledWrapper>
+  )
+};
+export default ResponseTime;

packages/grafnode-components/src/components/ResponsePane/StatusCode/StyledWrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.75rem;
+  font-weight: 600;
+`;
+
+export default Wrapper;

packages/grafnode-components/src/components/ResponsePane/StatusCode/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const StatusCode = () => {
+  return (
+    <StyledWrapper className="text-green-700 mt-4">
+      200 OK
+    </StyledWrapper>
+  )
+};
+export default StatusCode;

packages/grafnode-components/src/components/ResponsePane/index.js

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import QueryResult from './QueryResult';
 import ResponseHeaders from './ResponseHeaders';
+import StatusCode from './StatusCode';
+import ResponseTime from './ResponseTime';
+import ResponseSize from './ResponseSize';
 import StyledWrapper from './StyledWrapper';
 
 const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
@@ -41,6 +44,11 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
       <div className="flex items-center tabs mt-1" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
+        <div className="flex flex-grow justify-end items-center">
+          <StatusCode />
+          <ResponseTime />
+          <ResponseSize />
+        </div>
       </div>
       <section>
         {getTabPanel(selectedTab)}