bbgo_origin/frontend/components/Stats.tsx

import { styled } from '@mui/styles';
import {StatsTitle, StatsValue, Percentage} from './Summary';

const StatsSection = styled('div')(() => ({
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 1fr',
  columnGap: '10px',
  rowGap: '20px',
}));

export default function Stats({stats, gridProfitsPercentage, gridAprPercentage}:{stats: GridStats,  gridProfitsPercentage: number, gridAprPercentage: number}){
  return (
    <StatsSection>
      <div>
        <StatsTitle>Grid Profits</StatsTitle>
        <StatsValue>{stats.gridProfits}</StatsValue>
        <Percentage>{gridProfitsPercentage}%</Percentage>
      </div>

      <div>
        <StatsTitle>Floating PNL</StatsTitle>
        <StatsValue>{stats.floatingPNL}</StatsValue>
      </div>

      <div>
        <StatsTitle>Grid APR</StatsTitle>
        <Percentage>{gridAprPercentage}%</Percentage>
      </div>

      <div>
        <StatsTitle>Current Price</StatsTitle>
        <div>{stats.currentPrice}</div>
      </div>

      <div>
        <StatsTitle>Price Range</StatsTitle>
        <div>
          {stats.lowestPrice}~{stats.highestPrice}
        </div>
      </div>
    </StatsSection>
  );
}