Change localization

src/components/EditRestaurant/EditRestaurantMenu.js

@@ -1,9 +1,93 @@
 import React from "react";
+import Divider from "@material-ui/core/Divider";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import TextField from "@material-ui/core/TextField";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+}));
 
 export default function EditRestaurantMenu(props) {
+  const classes = useStyles();
+  const {
+    imgUrl,
+    dishes,
+    categories,
+    lunchMenu,
+    name,
+    city,
+    adress,
+    placesId,
+    location,
+    workingHours,
+    description,
+    tags,
+    links,
+    phone,
+    hidden,
+  } = props.restaurant;
+
+  const CategoriesList = categories.map((category) => {
+    return (
+      <Accordion key={category} className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>{category}</h4>
+        </AccordionSummary>
+      </Accordion>
+    );
+  });
+
   return (
     <div className="editRestaurant-tab">
-      <p>Menu</p>
+      <div className="editRestaurant-sectiontitle">
+        <h4>Menu</h4>
+        <Divider />
+      </div>
+      {CategoriesList}
+      <Accordion className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>Dodaj kategorię</h4>
+        </AccordionSummary>
+        <TextField
+          className={classes.textInputFullWidth}
+          label="Nazwa kategorii"
+          variant="outlined"
+        ></TextField>
+        <ButtonSecondary text="Dodaj" />
+      </Accordion>
+      <div className="editRestaurant-sectiontitle">
+        <h4>Lunch menu</h4>
+        <Divider />
+      </div>
     </div>
   );
 }