import * as React from 'react';
import { Box, GridItem, Grid, LoadingPlaceholder } from '@nova-hf/ui';

const LoadingContent = () => {
  return (
    <Box marginY={8} width="100%">
      <Box marginBottom={2}>
        <LoadingPlaceholder height={3} width="5/12" />
      </Box>
      <Box marginBottom={8}>
        <LoadingPlaceholder height={15} width="100%" />
      </Box>
      <Box marginBottom={2}>
        <LoadingPlaceholder height={3} width="5/12" />
      </Box>

      <Grid gridTemplate={[1, 2, 3]} rowGap={4} columnGap={4}>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
        <GridItem gridRow={{ sm: 'span1' }}>
          <LoadingPlaceholder height={25} width="100%" />
        </GridItem>
      </Grid>
    </Box>
  );
};

export default LoadingContent;