44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { styled } from '@mui/styles';
|
||
|
|
import DashboardLayout from '../layouts/DashboardLayout';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { queryStrategiesMetrics } from '../api/bbgo';
|
||
|
|
import type { GridStrategy } from '../api/bbgo';
|
||
|
|
|
||
|
|
import Detail from '../components/Detail';
|
||
|
|
|
||
|
|
const StrategiesContainer = styled('div')(() => ({
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
padding: '40px 20px',
|
||
|
|
display: 'grid',
|
||
|
|
gridTemplateColumns: 'repeat(3, 350px);',
|
||
|
|
justifyContent: 'center',
|
||
|
|
gap: '30px',
|
||
|
|
'@media(max-width: 1400px)': {
|
||
|
|
gridTemplateColumns: 'repeat(2, 350px)',
|
||
|
|
},
|
||
|
|
'@media(max-width: 1000px)': {
|
||
|
|
gridTemplateColumns: '350px',
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
export default function Strategies() {
|
||
|
|
const [details, setDetails] = useState<GridStrategy[]>([]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
queryStrategiesMetrics().then((value) => {
|
||
|
|
setDetails(value);
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DashboardLayout>
|
||
|
|
<StrategiesContainer>
|
||
|
|
{details.map((element) => {
|
||
|
|
return <Detail key={element.id} data={element} />;
|
||
|
|
})}
|
||
|
|
</StrategiesContainer>
|
||
|
|
</DashboardLayout>
|
||
|
|
);
|
||
|
|
}
|