import React from 'react'; import {useSelector} from "react-redux"; import {selectVariations} from "../../slices/editorSlice"; import { Grid, Box } from '@material-ui/core'; import {makeStyles} from "@material-ui/styles"; import Variation from "./Variation"; const useStyles = makeStyles({ gridCard: { width: '100%', }, }); export default function VariationsCollection() { const completions = useSelector(selectVariations); const styles = useStyles(); return ( <Box> <Grid container direction="column" justify="flex-start" alignItems="flex-start" spacing={1} > {completions.slice().reverse().map(completion => ( <Grid item key={completion.id} xs={12} className={styles.gridCard}> <Variation {...completion} /> </Grid> ))} </Grid> </Box> ); }