{"size": 2042, "ext": "js", "max_stars_repo_path": "client/src/components/AddForm/index.js", "max_stars_repo_name": "WilliamCrownover/bfanz", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/AddForm/index.js", "max_issues_repo_name": "WilliamCrownover/bfanz", "max_issues_repo_issues_event_min_datetime": "2021-10-02T21:01:16.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-22T04:22:15.000Z", "max_forks_repo_path": "client/src/components/AddForm/index.js", "max_forks_repo_name": "WilliamCrownover/bfanz", "max_forks_repo_forks_event_min_datetime": "2021-11-30T19:29:47.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-30T19:29:47.000Z"}
{"max_stars_count": null, "max_issues_count": 38, "max_forks_count": 1, "avg_line_length": 35.2068965517, "max_line_length": 97, "alphanum_fraction": 0.3932419197}
import Grid from '@mui/material/Grid';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

import RatingCard from '../RatingCard'
import AddCrewCard from '../AddCrewCard'

export default function addForm() {
    return (
        <>
            <Grid
                container
                direction='row'
                justifyContent='center'
                alignItems='center'
                spacing={{ xs: 2, md: 3 }}
            >
                <Grid item xs={12}>
                    <TextField fullWidth id="title" label="Movie Title" variant="standard" />
                </Grid>
                <Grid item xs={12}>
                    <TextField fullWidth id="hook-questions" label="Hook" variant="standard" />
                </Grid>
                <Grid item xs={12}>
                    <TextField fullWidth id="description" label="Description" variant="filled" />
                </Grid>

                {/* Lower Grid Area */}
                <Grid item xs={12}>
                    <Container>
                        <Grid
                            container
                            direction="row"
                            justifyContent='center'
                            alignItems="stretch"
                            rowSpacing={1}
                        >
                            {/* RatingCard*/}
                            <Grid item xs={12} md={6} sx={{ color: 'black' }}>
                                <RatingCard/>
                            </Grid>

                            {/* CrewCard*/}
                            <Grid item xs={12} md={6}>
                                <AddCrewCard/>
                            </Grid>

                        </Grid>
                    </Container>
                </Grid>
                <Grid item>
                    <Button size="large" variant='outlined'>Add Movie</Button>
                </Grid>
            </Grid>
        </>
    );
};