kandimat/redaktions-app/src/components/DialogTitleAndDetails.tsx
2021-01-30 16:12:10 +01:00

50 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;
onTitleChange(newTitle: string): void;
onDetailsChange(newDetails: string): void;
}
export function DialogTitleAndDetails(
props: DialogTitleAndDetailsProps
): React.ReactElement {
const classes = useStyles();
return (
<React.Fragment>
<TextField
className={classes.textField}
id="title"
label="Zusammenfassung"
fullWidth
variant="outlined"
value={props.title}
onChange={(e) => props.onTitleChange(e.target.value)}
/>
<TextField
className={classes.textField}
multiline
rows={4}
id="description"
label="Details"
fullWidth
variant="outlined"
value={props.details}
onChange={(e) => props.onDetailsChange(e.target.value)}
/>
</React.Fragment>
);
}