feat: resize logo

2 files changed, 28 insertions, 4 deletions

diff --git a/components/topnav.tsx b/components/topnav.tsx
index fa189f2..ad062a2 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -9,13 +9,16 @@ import {
   MenuList,
   MenuItem,
   Container,
-  Image,
   useMediaQuery,
   useColorModeValue
 } from '@chakra-ui/react'
 import { GiHamburgerMenu } from "react-icons/gi"
 import { DiGithubBadge } from "react-icons/di"
 import ThemeToggleButton from "../components/toggle_theme_button"
+import Image from "../lib/next_image"
+
+import LogoLight from "../public/images/logo_light.png"
+import LogoDark from "../public/images/logo_dark.png"
 
 function MobileNav() {
   return <>
@@ -56,10 +59,12 @@ export default function Navbar() {
       mb="1"
     >
       <HStack>
-        <Box minW="189px" h={["22px", "22px", "30px", "30px"]} flex="0" >
+        <Box minW="170px" h={["22px", "22px", "30px", "30px"]} flex="0" >
           <Image 
-            h="24px" 
-            src={useColorModeValue("images/logo_light.png", "images/logo_dark.png")}
+            height="24px" 
+            width="165px"
+            quality="100"
+            src={useColorModeValue(LogoLight, LogoDark)}
             />
         </Box>
         <Box flex="1">
diff --git a/lib/next_image.tsx b/lib/next_image.tsx
new file mode 100644
index 0000000..6fb25bf
--- /dev/null
+++ b/lib/next_image.tsx
@@ -0,0 +1,19 @@
+import NextImage from "next/image";
+import { chakra } from "@chakra-ui/react";
+
+const Image = chakra(NextImage, {
+  baseStyle: { maxH: 120, maxW: 120 },
+  shouldForwardProp: (prop) =>
+    [
+      "width",
+      "height",
+      "src",
+      "alt",
+      "quality",
+      "placeholder",
+      "blurDataURL",
+      "loader ",
+    ].includes(prop),
+});
+
+export default Image