import React from 'react';
import { Card } from '@digigov/ui/content/Card';
import { Grid } from '@digigov/ui/layouts/Grid';

export const ResponsiveSpacing = (_: any) => {
  return (
    <>
      <Grid
        role="grid"
        aria-label="grid-example"
        container
        spacing={{ xs: 1, sm: 4, md: 6, lg: 8, xl: 12 }}
      >
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
        <Grid role="row" xs={12} sm={6} md={4}>
          <Card variant="border" role="gridcell">
            1
          </Card>
        </Grid>
      </Grid>
    </>
  );
};
export default ResponsiveSpacing;
