65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React from "react"
|
|
import styled from "@emotion/styled"
|
|
import { Flex, Box, Text } from "rebass"
|
|
|
|
const StyledRoutesOverview = styled(Flex)`
|
|
border: 1px solid #e3e8ee;
|
|
border-radius: 5px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
max-height: calc(90vh - 20px);
|
|
overflow-y: scroll;
|
|
align-self: flex-start;
|
|
font-size: 1;
|
|
top: 20px;
|
|
bottom: 20px;
|
|
`
|
|
|
|
const RoutesOverview = ({ content }) => {
|
|
if (!content) return null
|
|
|
|
return (
|
|
<StyledRoutesOverview mb={3} flexDirection="column">
|
|
<Text
|
|
fontSize={0}
|
|
fontFamily="body"
|
|
py={2}
|
|
px={3}
|
|
color="#4f566b"
|
|
backgroundColor="#e3e8ee"
|
|
>
|
|
ENDPOINTS
|
|
</Text>
|
|
<Box
|
|
w={1}
|
|
px={4}
|
|
py={2}
|
|
flex="1"
|
|
sx={{ overflowY: "scroll" }}
|
|
backgroundColor="#f7fafc"
|
|
>
|
|
<Flex fontSize={1} flexDirection="column">
|
|
{content.map(route => (
|
|
<Flex mb={2} width="100%">
|
|
<Text
|
|
width="55px"
|
|
mr={2}
|
|
variant={`labels.${route.method}`}
|
|
textAlign="right"
|
|
>
|
|
{route.method}
|
|
</Text>
|
|
<Text color="#4f566b">
|
|
{route.path?.replace(/{(.*?)}/g, ":$1")}
|
|
</Text>
|
|
</Flex>
|
|
))}
|
|
</Flex>
|
|
</Box>
|
|
</StyledRoutesOverview>
|
|
)
|
|
}
|
|
|
|
export default RoutesOverview
|