Feature/site detail page (#99)

* site: pull data from "icons" dir * site: display icons * site: remove redundant code * site: colour mode support * site: header * site: order imports * site: search * site: add toast when copying icon * site: styling * site: hero * fix: disable theme toggle transitions * feat: Use Yarn Workspaces * refactor: Update site deploy scripts * refactor: Remove dark mode for now * feat: Add site title * refactor: Fix warning and format * feat: Add dark mode back 👀 * feat: Escape key to reset query * Fix by aelfric * Add Github link * Fix #40 * Add site overlay * sort categories * Add detail page * Add first categories * add box * move site to root directory * fix merge issues * Fix routing issues * Fix icon overlay * Add copy and download icon * Fix style issues * Add text * update chakra UI * remove import * update dependecies * add lucide react * Fix bugs * delete stats files * update charkra version Co-authored-by: John Letey <johnletey@gmail.com> Co-authored-by: appmachine <appmachine@appmachines-iMac.local>
2020-10-26 08:59:56 +01:00
parent 2c38fac9b1
commit 5c96b8d848
22 changed files with 1227 additions and 712 deletions
--- a/site/src/components/Header.tsx
+++ b/site/src/components/Header.tsx
@@ -0,0 +1,62 @@
+import {
+  Button,
+  Flex,
+  Stack,
+  Text,
+  Link,
+} from "@chakra-ui/core";
+import download from "downloadjs";
+import JSZip from "jszip";
+import { Download, GitHub } from 'lucide-react';
+import theme from "../lib/theme";
+
+function generateZip(icons) {
+  const zip = new JSZip();
+  Object.values(icons).forEach((icon) =>
+    // @ts-ignore
+    zip.file(`${icon.name}.svg`, icon.src)
+  );
+  return zip.generateAsync({ type: 'blob' });
+}
+
+const Header = ({ data }) => {
+  const downloadAllIcons = async () => {
+
+    const zip = await generateZip(data);
+    download(zip, 'feather.zip');
+  };
+
+  const repositoryUrl = 'https://github.com/lucide-icons/lucide';
+
+  return (
+    <Flex direction="column" align="center" justify="center">
+      <Text fontSize="3xl" as="b" mb="4" textAlign="center">
+        Simply beautiful open source icons, community-sourced
+      </Text>
+      <Text fontSize="lg" as="p" textAlign="center" mb="8">
+        An open-source icon library, a fork of <Link href="https://github.com/feathericons/feather" isExternal>Feather Icons</Link>. <br/>We're expanding the icon set as much as possible while keeping it nice-looking - <Link href={repositoryUrl} isExternal>join us</Link>!
+      </Text>
+      <Stack isInline marginTop={3} marginBottom={10}>
+        <Button
+          leftIcon={<Download/>}
+          size="lg"
+          onClick={downloadAllIcons}
+        >
+          Download all
+        </Button>
+        <Button
+          as="a"
+          leftIcon={<GitHub/>}
+          size="lg"
+          href={repositoryUrl}
+          target="__blank"
+          onClick={downloadAllIcons}
+        >
+          Github
+        </Button>
+      </Stack>
+    </Flex>
+  )
+};
+
+export default Header;