feat: response status, time, size placeholders

This commit is contained in:
Anoop M D 2022-01-01 23:34:46 +05:30
parent cd31c80dae
commit 305fa14c7f
7 changed files with 67 additions and 0 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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;

View File

@ -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)}