diff --git a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx b/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx index 7bdcd177cbe2f0bfa38f73c13a692ebf9b8dbc3d..7b6cc337f071afb84bb3e899001a5a3e1ce195ec 100644 --- a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx +++ b/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { + Grid, Paper, Table, TableBody, @@ -18,43 +19,45 @@ const useStyles = makeStyles(() => ({ }, })); -function createData( - name: string, - value: string, -): { name: string; value: string } { - return { name, value }; -} - -const rows = [ - createData('From:', 'Via Di Quel Bozen, 45, 39037'), - createData('Date:', '29 / 07 / 2021'), - createData('Time:', '12:15'), - createData('To:', 'Via del Krankenhaus, 7, 39037'), -]; +type ReservationProps = { + departure: string; + destination: string; + time: string; + date: string; +}; -export const Reservation: FC = () => { +export const Reservation: FC<ReservationProps> = ({ + departure, + destination, + time, + date, +}: ReservationProps) => { const classes = useStyles(); return ( - <TableContainer component={Paper}> - <Table aria-label="simple table"> - <TableHead> - <TableRow> - <TableCell>DriveToHospital </TableCell> - </TableRow> - </TableHead> + <Grid item container style={{ paddingTop: '20px' }}> + <Grid item xs={1} lg={2} /> + <Grid item xs={10} lg={8}> + <TableContainer component={Paper}> + <Table aria-label="simple table"> + <TableHead> + <TableRow> + <TableCell>DriveToHospital </TableCell> + </TableRow> + </TableHead> - <TableBody> - {rows.map((row) => ( - <TableRow key={row.name}> - <TableCell component="th" scope="row"> - {row.name} - </TableCell> - <TableCell align="right">{row.value}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </TableContainer> + <TableBody> + <TableRow key="departure"> + <TableCell component="th" scope="row"> + Departure + </TableCell> + <TableCell align="right">{departure}</TableCell> + </TableRow> + </TableBody> + </Table> + </TableContainer> + </Grid> + <Grid item xs={1} lg={2} /> + </Grid> ); };