Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@pinomaker-hoo
pinomaker-hoo committed Nov 23, 2023
1 parent d8bcd5f commit c57db47
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 16 deletions.
45 changes: 32 additions & 13 deletions src/pages/api-page/api-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
// ** Component Imports
import SideMenu from './sideMenu'
import { ContextBox } from '@/components/ContentBox'
import { BasicTable } from './component'
import { AuthTable, BasicTable } from './component'

// ** Type Imports
import type { Collection } from '@/types/collection'
Expand Down Expand Up @@ -82,7 +82,7 @@ const ApiPageView = ({
</Typography>
</Box>
<Box>
<Typography variant="h5" sx={{ color: 'white' }}>
<Typography variant="h6" sx={{ color: 'white' }}>
save message
</Typography>
</Box>
Expand All @@ -91,7 +91,7 @@ const ApiPageView = ({
sx={{
backgroundColor: Color.purple,
width: '100%',
height: 60,
height: 50,
borderRadius: 3,
display: 'flex',
alignItems: 'center',
Expand All @@ -112,7 +112,7 @@ const ApiPageView = ({
value={request.method as any}
name="method"
onChange={handleSelect}
sx={{ border: 'none' }}
sx={{ border: 'none', height: 50 }}
>
<MenuItem value="GET">
<Typography variant="h6" sx={{ color: Color.getColor }}>
Expand Down Expand Up @@ -170,6 +170,7 @@ const ApiPageView = ({
display: 'flex',
alignItems: 'center',
mt: 3,
pl: 3,
}}
>
<Box
Expand All @@ -183,23 +184,25 @@ const ApiPageView = ({
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Typography
variant="h6"
sx={{ color: tab === 0 ? 'white' : Color.glassGrey }}
sx={{
color: tab === 0 ? 'white' : Color.glassGrey,
}}
onClick={() => handleTab(0)}
>
params
</Typography>
</Box>
{tab === 0 && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box
{/* <Box
sx={{
width: 30,
height: 1.2,
borderRadius: 1,
mt: 1,
backgroundColor: 'white',
}}
></Box>
></Box> */}
</Box>
)}
</Box>
Expand All @@ -222,15 +225,15 @@ const ApiPageView = ({
</Box>
{tab === 1 && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box
{/* <Box
sx={{
width: 30,
height: 1.2,
borderRadius: 1,
mt: 1,
backgroundColor: 'white',
}}
></Box>
></Box> */}
</Box>
)}
</Box>
Expand All @@ -253,15 +256,15 @@ const ApiPageView = ({
</Box>
{tab === 2 && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box
{/* <Box
sx={{
width: 30,
height: 1.2,
borderRadius: 1,
mt: 1,
backgroundColor: 'white',
}}
></Box>
></Box> */}
</Box>
)}
</Box>
Expand All @@ -284,21 +287,37 @@ const ApiPageView = ({
</Box>
{tab === 3 && (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box
{/* <Box
sx={{
width: 30,
height: 1.2,
borderRadius: 1,
mt: 1,
backgroundColor: 'white',
}}
></Box>
></Box> */}
</Box>
)}
</Box>
</Box>
<Box sx={{ mt: 3, height: 200, overflowY: 'scroll' }}>
{tab === 0 && <BasicTable />}
{tab === 1 && <AuthTable />}
{tab === 2 && <BasicTable />}
{tab === 3 && (
<Box
sx={{
mt: 3,
height: 300,
backgroundColor: Color.purple,
overflowY: 'scroll',
}}
>
<Typography variant="h6" sx={{ color: Color.glassGrey }}>
{response}
</Typography>
</Box>
)}
</Box>
<Box sx={{ mt: 3 }}>
<Typography variant="h6" sx={{ color: Color.glassGrey }}>
Expand Down
46 changes: 43 additions & 3 deletions src/pages/api-page/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ import {
TableCell,
TableHead,
TableRow,
Paper,
InputBase,
Box,
FormControl,
Select,
Typography,
} from '@mui/material'

export const InputTextField = styled(TextField)({
Expand Down Expand Up @@ -76,6 +79,8 @@ function createData(
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
]

export function BasicTable() {
Expand All @@ -91,13 +96,15 @@ export function BasicTable() {
<TableRow>
<TableCell
sx={{ borderRight: `2px ${Color.purple} solid` }}
size="small"
></TableCell>
<TableCell
align="left"
sx={{
color: Color.glassGrey,
borderRight: `2px ${Color.purple} solid`,
}}
size="small"
>
key
</TableCell>
Expand All @@ -107,6 +114,7 @@ export function BasicTable() {
color: Color.glassGrey,
borderRight: `2px ${Color.purple} solid`,
}}
size="small"
>
value
</TableCell>
Expand All @@ -116,6 +124,7 @@ export function BasicTable() {
color: Color.glassGrey,
borderRight: `2px ${Color.purple} solid`,
}}
size="small"
>
description
</TableCell>
Expand All @@ -137,7 +146,8 @@ export function BasicTable() {
>
<TableCell
align="center"
sx={{ width: 100, borderRight: `2px ${Color.purple} solid` }}
sx={{ width: 50, borderRight: `2px ${Color.purple} solid` }}
size="small"
>
<CheckBox />
</TableCell>
Expand All @@ -147,16 +157,18 @@ export function BasicTable() {
width: 300,
borderRight: `2px ${Color.purple} solid`,
}}
size="small"
>
<InputBase sx={{ color: Color.glassGrey }} />
</TableCell>
<TableCell
align="left"
sx={{ width: 300, borderRight: `2px ${Color.purple} solid` }}
size="small"
>
<InputBase sx={{ color: Color.glassGrey }} />
</TableCell>
<TableCell align="left">
<TableCell align="left" size="small">
<InputBase sx={{ color: Color.glassGrey }} />
</TableCell>
</TableRow>
Expand All @@ -166,3 +178,31 @@ export function BasicTable() {
</TableContainer>
)
}

export const AuthTable = () => {
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: 'space-between',
}}
>
<Box sx={{ width: '15%' }}>
<FormControl fullWidth>
<Select
// eslint-disable-next-line @typescript-eslint/no-explicit-any
name="method"
sx={{ border: 'none', height: 50 }}
>
<MenuItem value="Bearer">Bearer</MenuItem>
</Select>
</FormControl>
</Box>
<Box sx={{ width: '80%', ml: '5%' }}>
<TextField variant="outlined" label="value" fullWidth />
</Box>
</Box>
)
}

0 comments on commit c57db47

Please sign in to comment.