Build search input

src/components/ColorModeSwitch.tsx

@@ -6,7 +6,7 @@ const ColorModeSwitch = () => {
   return (
     <HStack>
       <Switch colorScheme='green' isChecked={colorMode === 'dark'} onChange={toggleColorMode} />
-      <Text>Dark Mode</Text>
+      <Text whiteSpace='nowrap'>Dark Mode</Text>
     </HStack>
   )
 }

src/components/NavBar.tsx

@@ -1,11 +1,13 @@
 import { HStack, Image } from '@chakra-ui/react'
 import logo from '../assets/logo.webp';
 import ColorModeSwitch from './ColorModeSwitch';
+import SearchInput from './SearchInput';
 
 const NavBar = () => {
   return (
-    <HStack justifyContent='space-between' padding='10px'>
+    <HStack padding='10px'>
       <Image src={logo} boxSize='60px' />
+      <SearchInput />
       <ColorModeSwitch />
     </HStack>
   )

src/components/SearchInput.tsx

@@ -0,0 +1,13 @@
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { BsSearch } from "react-icons/bs";
+
+const SearchInput = () => {
+  return (
+    <InputGroup>
+      <InputLeftElement children={<BsSearch />} />
+      <Input borderRadius={20} placeholder="Search games..." variant="filled" />
+    </InputGroup>
+  );
+};
+
+export default SearchInput;