update logo, add mode toggle

components/ColorModeIcon/index.tsx

@@ -0,0 +1,61 @@
+import { useColorMode } from '@chakra-ui/color-mode';
+import Icon from '@chakra-ui/icon';
+import { Tooltip } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+import { IoMoonOutline, IoPartlySunnyOutline } from 'react-icons/io5';
+import { RiMoonCloudyLine } from 'react-icons/ri';
+import { FaCloudMoonRain } from 'react-icons/fa';
+import { WiDaySunny, WiDayRainMix } from 'react-icons/wi';
+interface Props {}
+
+const weatherIcons = {
+	default: {
+		night: <IoMoonOutline />,
+		day: <WiDaySunny />,
+	},
+	rain: {
+		day: <WiDayRainMix />,
+		night: <FaCloudMoonRain />,
+	},
+	cloud: {
+		day: <IoPartlySunnyOutline />,
+		night: <RiMoonCloudyLine />,
+	},
+};
+function ColorModeIcon(props: Props) {
+	const {} = props;
+	const { colorMode, toggleColorMode } = useColorMode();
+	const [weatherIcon, setWeatherIcon] = useState(weatherIcons.default);
+
+	useEffect((): void => {
+		try {
+			navigator?.geolocation?.getCurrentPosition(
+				async ({ coords: { longitude, latitude } }: GeolocationPosition) => {
+					const body = await (
+						await fetch(
+							`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=87eb04e63a1d2d86f382d92a06242e9c`
+						)
+					).json();
+
+					if (body.rain) {
+						setWeatherIcon(weatherIcons.rain);
+					} else if (body?.clouds?.all > 0) {
+						setWeatherIcon(weatherIcons.cloud);
+					} else {
+						setWeatherIcon(weatherIcons.default);
+					}
+				}
+			);
+		} catch (e) {
+			setWeatherIcon(weatherIcons.default);
+		}
+	}, []);
+
+	return (
+		<Icon fontSize="22px" onClick={toggleColorMode}>
+			{colorMode === 'dark' ? weatherIcon.night : weatherIcon.day}
+		</Icon>
+	);
+}
+
+export default ColorModeIcon;

components/Navbar/index.tsx

@@ -12,13 +12,14 @@ import {
 	MenuButton,
 	MenuList,
 	MenuItem,
-	MenuDivider,
 	useDisclosure,
 	useColorModeValue,
 	Stack,
+	Image,
 } from '@chakra-ui/react';
 import { HamburgerIcon, CloseIcon, AddIcon } from '@chakra-ui/icons';
 import { signOut } from 'next-auth/client';
+import ColorModeIcon from '../ColorModeIcon';
 
 const authLinks = [
 	{ name: 'Dashboard', url: '/dashboard' },
@@ -62,7 +63,9 @@ export default function Navbar({ user }: any) {
 						onClick={isOpen ? onClose : onOpen}
 					/>
 					<HStack spacing={8} alignItems={'center'}>
-						<Box>Logo</Box>
+						<Box>
+							<Image src="/static/images/logo.jpeg" boxSize="50px" />
+						</Box>
 						<HStack
 							as={'nav'}
 							spacing={4}
@@ -75,39 +78,43 @@ export default function Navbar({ user }: any) {
 							))}
 						</HStack>
 					</HStack>
-					{user ? (
-						<Flex alignItems={'center'}>
-							<Button
-								variant={'solid'}
-								colorScheme={'teal'}
-								size={'sm'}
-								mr={4}
-								leftIcon={<AddIcon />}
-							>
-								Action
-							</Button>
-							<Menu>
-								<MenuButton
-									as={Button}
-									rounded={'full'}
-									variant={'link'}
-									cursor={'pointer'}
-									minW={0}
+					<Flex alignItems={'center'}>
+						<ColorModeIcon />
+						{user ? (
+							<>
+								<Button
+									variant={'solid'}
+									colorScheme={'teal'}
+									size={'sm'}
+									mr={4}
+									ml={4}
+									leftIcon={<AddIcon />}
 								>
-									<Avatar size={'sm'} src={user?.image} />
-								</MenuButton>
-								<MenuList>
-									<MenuItem
-										onClick={() => {
-											signOut();
-										}}
+									Action
+								</Button>
+								<Menu>
+									<MenuButton
+										as={Button}
+										rounded={'full'}
+										variant={'link'}
+										cursor={'pointer'}
+										minW={0}
 									>
-										Logout
-									</MenuItem>
-								</MenuList>
-							</Menu>
-						</Flex>
-					) : null}
+										<Avatar size={'sm'} src={user?.image} />
+									</MenuButton>
+									<MenuList>
+										<MenuItem
+											onClick={() => {
+												signOut();
+											}}
+										>
+											Logout
+										</MenuItem>
+									</MenuList>
+								</Menu>
+							</>
+						) : null}
+					</Flex>
 				</Flex>
 
 				{isOpen ? (

package.json

@@ -24,7 +24,7 @@
 		"react-icons": "^4.2.0"
 	},
 	"devDependencies": {
-		"@types/react": "17.0.20",
+		"@types/react": "^17.0.21",
 		"@typescript-eslint/eslint-plugin": "^4.31.0",
 		"eslint-config-prettier": "^8.3.0",
 		"file-loader": "^6.2.0",