Fix download button & improvements

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

animations/hover.js

@@ -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;

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;

components/card/index.js

@@ -1,10 +1,11 @@
 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 (
+    <Tap>
       <Link href={url} passHref>
         <Box
           _hover={{
@@ -25,6 +26,7 @@ const Index = ({ title, url, href }) => {
           </Text>
         </Box>
       </Link>
+    </Tap>
   );
 };
 

components/categories/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Index = () => {
+  return (
+    <div>Index</div>
+  )
+}
+
+export default Index

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";

components/search/index.js

@@ -6,19 +6,21 @@ 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 (
     <>
+      <Tap>
         <Link href={`/svg/${id}`} passHref>
           <Box
             id={id}
@@ -33,10 +35,11 @@ const AutocompleteItem = ({ id, title, href, url }) => {
               <Text fontSize="18px" fontWeight="light">
                 {title}
               </Text>
-            <Icon as={IoLink} />
+              <Icon as={BiLinkExternal} />
             </HStack>
           </Box>
         </Link>
+      </Tap>
     </>
   );
 };

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 />}