Update site (#87)

* Move the site to the root directory

* Update Site name

Co-authored-by: Eric Fennis <eric.fennis@endurance.com>

site/src/components/Layout.tsx

@@ -0,0 +1,64 @@
+import { Box, Divider, Flex, Text, Link, Icon, useColorMode } from "@chakra-ui/core";
+import { useKeyBindings } from "../lib/key";
+import {useRouter} from "next/router";
+
+const Layout = ({ children }) => {
+  const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  function setQuery(query){
+    router.push({
+      pathname: '/',
+      query: { query: query }
+    }).then();
+  }
+  useKeyBindings({
+    Escape: {
+      fn: () => setQuery(""),
+    },
+    KeyT: {
+      fn: () => toggleColorMode(),
+    },
+  });
+
+  return (
+    <Box h="100vh">
+      <Flex mb={16} w="full">
+        <Flex
+          alignItems="center"
+          justifyContent="space-between"
+          pt={4}
+          pb={4}
+          maxW="1250px"
+          margin="0 auto"
+          w="full"
+          px={8}
+        >
+          <Flex justifyContent="center" alignItems="center">
+            <Text
+              fontSize="4xl"
+              onClick={() => setQuery("")}
+              style={{ cursor: "pointer" }}
+            >
+              Lucide
+            </Text>
+          </Flex>
+          <Flex justifyContent="center" alignItems="center">
+          <Link href="https://github.com/lucide-icons/lucide" isExternal style={{ fontSize: "18px", marginRight: '24px' }}>
+            Github
+          </Link>
+            <div onClick={toggleColorMode} style={{ cursor: "pointer" }}>
+              <Icon name={colorMode == "light" ? "moon" : "sun"} size="24px" />
+            </div>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Flex margin="0 auto" direction="column" maxW="1250px" px={8}>
+        {children}
+        <Divider marginTop={10} marginBottom={10} />
+      </Flex>
+    </Box>
+  );
+};
+
+export default Layout;