AchievementDescriptionCard.js

import React from 'react'
import styled from 'styled-components'
import Paper from '@material-ui/core/Paper';
import { Grid } from '@material-ui/core'
import RequirementDialog from './RequirementsDialog.js';

export default function AchievementDescriptionCard(props) {
    return (
            <Paper elevation={3}>
                <Grid container direction="row" justify="space-around" alignItems="center">
                    <Grid item xs={3}>
                        <AchievementImg src={props.src}/>
                    </Grid>
                    <Grid item xs={7}>
                        <AchievementTitle>{props.title}</AchievementTitle>
                        <AchievementDescription>{props.description}</AchievementDescription>
                        <RequirementDialog
                            title={props.title}
                            description={props.description}
                            requirements={props.requirements}
                        />
                    </Grid>
                </Grid>
            </Paper>
    );
}

const AchievementImg = styled.img`
  border-radius: 100px;
  width: 100px;
  height: 100px;
  margin: 30px;
`

const AchievementTitle = styled.h2`
`

const AchievementDescription = styled.p`
`