Build a navbar

src/App.tsx

@@ -1,4 +1,5 @@
 import { Grid, GridItem, Show } from "@chakra-ui/react";
+import NavBar from "./components/NavBar";
 
 function App() {
   return (
@@ -8,8 +9,8 @@ function App() {
         lg: `"nav nav" "aside main"`,
       }}
     >
-      <GridItem area="nav" bg="coral">
+      <GridItem area="nav">
-        Nav
+        <NavBar />
       </GridItem>
       <Show above="lg">
         <GridItem area="aside" bg="gold">

src/components/NavBar.tsx

@@ -0,0 +1,13 @@
+import { HStack, Image, Text } from '@chakra-ui/react'
+import logo from '../assets/logo.webp';
+
+const NavBar = () => {
+  return (
+    <HStack>
+      <Image src={logo} boxSize='60px' />
+      <Text>NavBar</Text>
+    </HStack>
+  )
+}
+
+export default NavBar