Added map search UI and initial multi-select

2020-09-30 12:30:33 +10:00
parent 78c86e6194
commit 670f047049
8 changed files with 258 additions and 88 deletions
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { Box, Input } from "theme-ui";
+
+import SearchIcon from "../icons/SearchIcon";
+
+function Search(props) {
+  return (
+    <Box sx={{ position: "relative", flexGrow: 1 }}>
+      <Input
+        sx={{
+          borderRadius: "0",
+          border: "none",
+          borderRight: "1px solid",
+          ":focus": {
+            outline: "none",
+          },
+          paddingRight: "36px",
+        }}
+        placeholder="Search"
+        {...props}
+      />
+      <Box
+        sx={{
+          position: "absolute",
+          right: "8px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: "24px",
+          width: "24px",
+          pointerEvents: "none",
+        }}
+      >
+        <SearchIcon />
+      </Box>
+    </Box>
+  );
+}
+
+export default Search;