kandimat/redaktions-app/src/components/DialogTitleAndDetails.tsx
2020-12-29 19:53:27 +01:00

48 lines
1.1 KiB
TypeScript

import {makeStyles} from "@material-ui/core/styles";
import React from "react";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
textField: {
marginBottom: theme.spacing(2),
}
}));
interface DialogTitleAndDetailsProps {
title: string,
details?: string | null,
handleTitleChange(newTitle: string): void,
handleDetailsChange(newDetails: string): void,
}
export function DialogTitleAndDetails(props: DialogTitleAndDetailsProps) {
const classes = useStyles();
return (
<React.Fragment>
<TextField
className={classes.textField}
id="title"
label="Zusammenfassung"
fullWidth
variant="outlined"
value={props.title}
onChange={e => props.handleTitleChange(e.target.value)}
/>
<TextField
className={classes.textField}
multiline
rows={4}
id="description"
label="Details"
fullWidth
variant="outlined"
value={props.details}
onChange={e => props.handleDetailsChange(e.target.value)}
/>
</React.Fragment>
)
}