diff --git a/src/features/session/components/SessionDetailsComponent.js b/src/features/session/components/SessionDetailsComponent.js new file mode 100644 index 0000000..236fb85 --- /dev/null +++ b/src/features/session/components/SessionDetailsComponent.js @@ -0,0 +1,87 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { withStyles, makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; + +const StyledTableCell = withStyles((theme) => ({ + head: { + backgroundColor: theme.palette.primary.main, + color: theme.palette.common.white + }, + body: { + fontSize: 14 + } +}))(TableCell); + +const StyledTableRow = withStyles((theme) => ({ + root: { + "&:nth-of-type(odd)": { + backgroundColor: theme.palette.action.hover + } + } +}))(TableRow); + +function createData(name, calories, fat, carbs, protein) { + return { name, calories, fat, carbs, protein }; +} + +const rows = [ + createData("Frozen yoghurt", 159, 6.0, 24, 4.0), + createData("Ice cream sandwich", 237, 9.0, 37, 4.3), + createData("Eclair", 262, 16.0, 24, 6.0), + createData("Cupcake", 305, 3.7, 67, 4.3), + createData("Gingerbread", 356, 16.0, 49, 3.9) +]; + +const useStyles = makeStyles({ + table: { + minWidth: 700 + } +}); + +const SessionDetailsComponent = () => { + const classes = useStyles(); + + return ( + + + + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map((row) => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ))} + +
+
+ ); +}; + +SessionDetailsComponent.propTypes = {}; + +export default SessionDetailsComponent; diff --git a/src/features/session/components/SessionListComponent.js b/src/features/session/components/SessionListComponent.js index acc23f7..ff54010 100644 --- a/src/features/session/components/SessionListComponent.js +++ b/src/features/session/components/SessionListComponent.js @@ -3,10 +3,10 @@ import { makeStyles } from "@material-ui/core/styles"; import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; -import Typography from "@material-ui/core/Typography"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import PropTypes from "prop-types"; import SessionSummary from "./SessionSummary"; +import SessionDetailsComponent from "./SessionDetailsComponent"; import Spinner from "../../../components/common/Spinner"; import { useTranslation } from "react-i18next"; @@ -42,11 +42,7 @@ const SessionListComponent = ({ sessions }) => { - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Suspendisse malesuada lacus ex, sit amet blandit leo lobortis - eget. - + );