web client v0.2 (add restaurant OK, settings OK)

src/components/Output/ListItemRestaurant.js

@@ -0,0 +1,62 @@
+import React from "react";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItem from "@material-ui/core/ListItem";
+import FastfoodIcon from "@material-ui/icons/Fastfood";
+import Badge from "@material-ui/core/Badge";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    "& .MuiBadge-colorPrimary": {
+      backgroundColor: "#13ff00",
+    },
+    "& .MuiBadge-colorError": {
+      backgroundColor: "#ff0000",
+    },
+  },
+  secondary: {
+    "& .MuiListItemText-secondary": {
+      color: "#7b7b7b",
+      fontSize: "13px",
+    },
+  },
+}));
+
+export default function ListItemRestaurant(props) {
+  const styles = useStyles();
+  const badgeData = {
+    color: "",
+    secondaryText: "",
+  };
+  const badgeInit = () => {
+    if (!props.subscriptionActive || props.subscriptionActive === false) {
+      badgeData.color = "error";
+      badgeData.secondaryText = "Aktywuj sybskrypcję";
+    } else {
+      badgeData.color = "primary";
+      badgeData.secondaryText = "Subskrypcja aktywna";
+    }
+  };
+  badgeInit();
+
+  return (
+    <ListItem button>
+      <ListItemIcon>
+        <Badge
+          className={styles.root}
+          anchorOrigin={{ vertical: "top", horizontal: "left" }}
+          variant="dot"
+          color={badgeData.color}
+        >
+          <FastfoodIcon />
+        </Badge>
+      </ListItemIcon>
+      <ListItemText
+        className={styles.secondary}
+        primary={props.name}
+        secondary={badgeData.secondaryText}
+      />
+    </ListItem>
+  );
+}