From b67dcc0be9eb8b494cfd2449d10069cac99039ff Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 4 Mar 2022 13:34:58 +0000
Subject: [PATCH] Fix download button & improvements

---
 README.md                      |  14 ++++++++---
 animations/hover.js            |  12 ---------
 animations/tap.js              |  12 +++++++++
 components/card/index.js       |  44 +++++++++++++++++----------------
 components/categories/index.js |   9 +++++++
 components/header/index.js     |   2 +-
 components/search/index.js     |  43 +++++++++++++++++---------------
 pages/svg/[id].js              |   3 +--
 public/images/banner.png       | Bin 178225 -> 178225 bytes
 9 files changed, 80 insertions(+), 59 deletions(-)
 delete mode 100644 animations/hover.js
 create mode 100644 animations/tap.js
 create mode 100644 components/categories/index.js

diff --git a/README.md b/README.md
index bda2517..21ea89f 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,16 @@
+<p align="center">
+  <a href="https://svgl.vercel.app/">
+    <img src="https://raw.githubusercontent.com/pheralb/svgl/main/public/images/logo.png" width="100px" alt="svgl logo" />
+  </a>
+</p>
+
 ## 🚀 Getting started:
 
+[SVGL](https://svgl.vercel.app/) is a beautiful collection of SVG logos. Free and open source.
+
 You need:
 
-- [Node.js 16+ (recommend: 16.13.2 LTS)](https://nodejs.org/en/)
+- [Node.js 16+ (recommend: 16.14.0 LTS)](https://nodejs.org/en/)
 - [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
 
 and run:
@@ -14,6 +22,6 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## 📦 Deployed on Vercel:
+## 🔑 License:
 
-[https://svgl.vercel.app/](https://svgl.vercel.app/)
+MIT
diff --git a/animations/hover.js b/animations/hover.js
deleted file mode 100644
index 991f90a..0000000
--- a/animations/hover.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-
-const Hover = ({ children }) => {
-  return (
-    <motion.div whileHover={{ scale: 1.020 }} whileTap={{ scale: 1 }}>
-      {children}
-    </motion.div>
-  );
-};
-
-export default Hover;
diff --git a/animations/tap.js b/animations/tap.js
new file mode 100644
index 0000000..f7e0410
--- /dev/null
+++ b/animations/tap.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const Tap = ({ children }) => {
+  return (
+    <motion.div whileTap={{ scale: 0.99 }}>
+      {children}
+    </motion.div>
+  );
+};
+
+export default Tap;
diff --git a/components/card/index.js b/components/card/index.js
index 05a0c88..8d50cc8 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,30 +1,32 @@
 import React from "react";
 import Link from "next/link";
 import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
-import Hover from "animations/hover";
+import Tap from "animations/tap";
 
 const Index = ({ title, url, href }) => {
   return (
-    <Link href={url} passHref>
-      <Box
-        _hover={{
-          shadow: "md",
-          transform: "translateY(-4px)",
-          transition: "all .3s",
-        }}
-        p={4}
-        cursor="pointer"
-        borderRadius="10px"
-        mb="3"
-      >
-        <Center>
-          <Image src={href} alt={title} boxSize="60px" />
-        </Center>
-        <Text mt="2" fontWeight="light" textAlign={"center"}>
-          {title}
-        </Text>
-      </Box>
-    </Link>
+    <Tap>
+      <Link href={url} passHref>
+        <Box
+          _hover={{
+            shadow: "md",
+            transform: "translateY(-4px)",
+            transition: "all .3s",
+          }}
+          p={4}
+          cursor="pointer"
+          borderRadius="10px"
+          mb="3"
+        >
+          <Center>
+            <Image src={href} alt={title} boxSize="60px" />
+          </Center>
+          <Text mt="2" fontWeight="light" textAlign={"center"}>
+            {title}
+          </Text>
+        </Box>
+      </Link>
+    </Tap>
   );
 };
 
diff --git a/components/categories/index.js b/components/categories/index.js
new file mode 100644
index 0000000..de9a14e
--- /dev/null
+++ b/components/categories/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Index = () => {
+  return (
+    <div>Index</div>
+  )
+}
+
+export default Index
\ No newline at end of file
diff --git a/components/header/index.js b/components/header/index.js
index 83654c1..038ccad 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -20,7 +20,7 @@ import {
 } from "react-icons/io5";
 import { BiLinkExternal } from "react-icons/bi";
 import Link from "next/link";
-import Hover from "animations/hover";
+import Hover from "animations/tap";
 import Show from "animations/show";
 import { svgl } from "components/svg";
 import HEADER_LINKS from "./links";
diff --git a/components/search/index.js b/components/search/index.js
index e6708ec..9b14a41 100644
--- a/components/search/index.js
+++ b/components/search/index.js
@@ -6,37 +6,40 @@ import {
   Input,
   InputLeftElement,
   InputGroup,
-  Button,
   Flex,
   HStack,
   Text,
   Image,
   Icon,
 } from "@chakra-ui/react";
-import { IoCloudDownloadOutline, IoLink, IoSearch } from "react-icons/io5";
+import { IoSearch } from "react-icons/io5";
+import { BiLinkExternal } from "react-icons/bi";
 import { Algolia } from "components/svg";
+import Tap from "animations/tap";
 
 const AutocompleteItem = ({ id, title, href, url }) => {
   return (
     <>
-      <Link href={`/svg/${id}`} passHref>
-        <Box
-          id={id}
-          w="100%"
-          borderWidth="1px"
-          borderRadius="6px"
-          mt="3"
-          cursor="pointer"
-        >
-          <HStack py={6} px={6} spacing={2}>
-            <Image src={href} alt={title} boxSize="20px" mr="2" />
-            <Text fontSize="18px" fontWeight="light">
-              {title}
-            </Text>
-            <Icon as={IoLink} />
-          </HStack>
-        </Box>
-      </Link>
+      <Tap>
+        <Link href={`/svg/${id}`} passHref>
+          <Box
+            id={id}
+            w="100%"
+            borderWidth="1px"
+            borderRadius="6px"
+            mt="3"
+            cursor="pointer"
+          >
+            <HStack py={6} px={6} spacing={2}>
+              <Image src={href} alt={title} boxSize="20px" mr="2" />
+              <Text fontSize="18px" fontWeight="light">
+                {title}
+              </Text>
+              <Icon as={BiLinkExternal} />
+            </HStack>
+          </Box>
+        </Link>
+      </Tap>
     </>
   );
 };
diff --git a/pages/svg/[id].js b/pages/svg/[id].js
index 916ae02..6518b75 100644
--- a/pages/svg/[id].js
+++ b/pages/svg/[id].js
@@ -41,7 +41,7 @@ export default function Icon() {
 
   const downloadSvg = (name, url) => {
     confetti();
-    download(url, `${name}.svg`, "image/svg+xml");
+    download(url);
   };
 
   return (
@@ -100,7 +100,6 @@ export default function Icon() {
               </Flex>
             </Flex>
           </SimpleGrid>
-
           <Link href="/" passHref>
             <Button
               leftIcon={<IoArrowBackOutline />}
diff --git a/public/images/banner.png b/public/images/banner.png
index e973f85eba6498f0c4932772289fbe7d9d0eeb1d..89a413cfaf6db6d6ff53980411252193a9eef9aa 100644
GIT binary patch
delta 75
zcmV-R0JQ(H@Cvc;3b3;Q0W_1e0VO0hGc{ynIWaITVq-HoEi`2`FfCy=G-54gWH2>1
hW@KVGFf(Jb{Q<E81nhzyIfJqUhq43#x3UBRf3v~@8D#(f

delta 75
zcmV-R0JQ(H@Cvc;3b3;Q0W*`d0VO15WMVL6Ib<{~V`4L9Ei^GSH7z+fWi~B1GGbw2
hFfe3dV`MqA{Q<E81jUVdXM?f?hq43#x3UBRf3xK?8e#wd