Merge branch 'develop'

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 **/public/sw.js.map
 **/public/workbox-*.js.map
 **/public/worker-*.js.map
+
+# SWC files ->
+.swc

data/svgs.json

@@ -354,7 +354,7 @@
     "slug": "/library/hostinger.svg",
     "title": "Hostinger",
     "category": "Hosting",
-    "url": "https://www.hostinguer.com/"
+    "url": "https://www.hostinger.com/"
   },
   {
     "id": 52,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svgl",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A beautiful library with SVG logos.",
   "private": true,
   "author": "@pheralb_",
@@ -20,21 +20,22 @@
     "ready": "vitest && next build"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.1.2",
-    "@emotion/react": "11.9.0",
-    "@emotion/styled": "11.8.1",
+    "@chakra-ui/react": "2.2.1",
+    "@emotion/react": "11.9.3",
+    "@emotion/styled": "11.9.3",
     "@uiball/loaders": "1.2.6",
     "canvas-confetti": "1.5.1",
     "downloadjs": "1.4.7",
-    "framer-motion": "6.3.9",
-    "next": "12.1.6",
+    "framer-motion": "6.3.16",
+    "next": "12.2.0",
     "next-pwa": "5.5.4",
     "next-seo": "5.4.0",
     "nextjs-progressbar": "0.0.14",
     "phosphor-react": "1.4.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hot-toast": "2.2.0",
+    "react-hotkeys-hook": "3.4.6",
     "swr": "1.3.0"
   },
   "devDependencies": {
@@ -42,14 +43,14 @@
     "@testing-library/react": "13.3.0",
     "@types/canvas-confetti": "1.4.2",
     "@types/downloadjs": "1.4.3",
-    "@types/node": "17.0.38",
-    "@types/react": "18.0.10",
+    "@types/node": "18.0.0",
+    "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
     "@vitejs/plugin-react": "1.3.2",
-    "eslint": "8.16.0",
-    "eslint-config-next": "12.1.6",
+    "eslint": "8.18.0",
+    "eslint-config-next": "12.2.0",
     "jsdom": "20.0.0",
-    "typescript": "4.7.2",
-    "vitest": "0.15.2"
+    "typescript": "4.7.4",
+    "vitest": "0.16.0"
   }
 }

src/layout/header/index.tsx

@@ -20,10 +20,15 @@ import CustomLink from "@/common/link";
 import Categories from "./categories";
 import Search from "@/components/search";
 import CustomIconBtn from "@/common/iconBtn";
+import { useHotkeys } from "react-hotkeys-hook";
 
 const Header = () => {
   const bg = useColorModeValue("bg.light", "bg.dark");
   const { isOpen, onToggle } = useDisclosure();
+  useHotkeys("ctrl+k", (e) => {
+    e.preventDefault();
+    onToggle();
+  });
   return (
     <>
       <Box

src/layout/header/theme.tsx

@@ -7,10 +7,8 @@ import { Moon, Sun } from "phosphor-react";
 const Theme = () => {
   const { toggleColorMode } = useColorMode();
   const key = useColorModeValue("light", "dark");
-  const icon = useColorModeValue(
-    <Moon size={22} />,
-    <Sun size={22} />
-  );
+  const icon = useColorModeValue(<Moon size={22} />, <Sun size={22} />);
+
   return (
     <AnimatePresence exitBeforeEnter initial={false}>
       <motion.div

src/pages/404.tsx

@@ -1,9 +1,21 @@
-import React from "react";
+import CustomLink from "@/common/link";
+import { Flex, Center, Heading, Text, Button } from "@chakra-ui/react";
+import { House } from "phosphor-react";
 
-type Props = {};
-
-const Error = (props: Props) => {
-  return <div>Error 404</div>;
+const Error = () => {
+  return (
+    <>
+      <Center>
+        <Flex direction="column" justifyContent="center" alignItems="center">
+          <Heading mb="2">Error 404</Heading>
+          <Text mb="3">The page you are trying to access does not exist.</Text>
+          <CustomLink href="/">
+              <Text fontFamily="Inter-Semibold">Go home</Text>
+          </CustomLink>
+        </Flex>
+      </Center>
+    </>
+  );
 };
 
 export default Error;