Resolve "Criar tela de busca"

Closes #10 (closed)

src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js

+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: "100%",
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+    color: "#666"
+  }
+}));
+
+export default function SearchEPCompCurriculum() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState([0]);
+
+  const handleToggle = value => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    setChecked(newChecked);
+  };
+  const filtrosComponente = [
+    { exemplo: "Arte", value: "0" },
+    { exemplo: "Biologia", value: "1" },
+    { exemplo: "Ciências da Natureza", value: "2" },
+    { exemplo: "Direitos Humanos", value: "3" },
+    { exemplo: "Educação Ambiental", value: "4" },
+    { exemplo: "Educação do Campo", value: "5" },
+    { exemplo: "Educação Especial", value: "6" },
+    { exemplo: "Educação Física", value: "7" },
+    { exemplo: "Educação Indígena", value: "8" },
+    { exemplo: "Educação Quilombola", value: "9" },
+    { exemplo: "Educação Sexual", value: "10" },
+    { exemplo: "Ensino Religioso", value: "11" },
+    { exemplo: "Filosofia", value: "12" },
+    { exemplo: "Física", value: "13" },
+    { exemplo: "Geografia", value: "14" },
+    { exemplo: "História", value: "15" },
+    { exemplo: "Informática", value: "16" },
+    { exemplo: "Língua Espanhola", value: "17" },
+    { exemplo: "Língua Inglesa", value: "18" },
+    { exemplo: "Língua Portuguesa", value: "19" },
+    { exemplo: "Matemática", value: "20" },
+    { exemplo: "Outras Línguas", value: "21" },
+    { exemplo: "Outros", value: "22" },
+    { exemplo: "Química", value: "23" },
+    { exemplo: "Sociologia", value: "24" }
+  ];
+
+  return (
+    <List className={classes.root}>
+      {filtrosComponente.map(item => {
+        const labelId = `checkbox-list-label-${item.value}`;
+
+        return (
+          <ListItem
+            key={item.exemplo}
+            role={undefined}
+            dense
+            button
+            onClick={handleToggle(item.value)}
+          >
+            <ListItemIcon>
+              <Checkbox
+                edge="start"
+                checked={checked.indexOf(item.value) !== -1}
+                tabIndex={-1}
+                disableRipple
+                inputProps={{ "aria-labelledby": labelId }}
+              />
+            </ListItemIcon>
+            <ListItemText id={labelId} primary={item.exemplo} />
+            <ListItemSecondaryAction>
+              <IconButton edge="end" aria-label="comments"></IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}