adds dark mode and logs errors in message response

src/components/Nav/ClearConvos.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import NavLink from './NavLink';
 import TrashIcon from '../svg/TrashIcon';
 import manualSWR from '~/utils/fetchers';
 import { useDispatch } from 'react-redux';

src/components/Nav/DarkMode.jsx

@@ -0,0 +1,19 @@
+import React, { useState, useContext } from 'react';
+import DarkModeIcon from '../svg/DarkModeIcon';
+import { ThemeContext } from '~/hooks/ThemeContext';
+
+export default function DarkMode() {
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  const clickHandler = () => setTheme(theme === 'dark' ? 'light' : 'dark');
+
+  return (
+    <a
+      className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      onClick={clickHandler}
+    >
+      <DarkModeIcon />
+      Dark mode
+    </a>
+  );
+}

src/components/Nav/NavLinks.jsx

@@ -1,17 +1,14 @@
 import React from 'react';
-import ClearConvos from './ClearConvos';
 import NavLink from './NavLink';
-import DarkModeIcon from '../svg/DarkModeIcon';
 import LogOutIcon from '../svg/LogOutIcon';
+import ClearConvos from './ClearConvos';
+import DarkMode from './DarkMode';
 
 export default function NavLinks() {
   return (
     <>
       <ClearConvos />
-      <NavLink
-        svg={DarkModeIcon}
-        text="Dark mode"
-      />
+      <DarkMode />
       <NavLink
         svg={LogOutIcon}
         text="Log out"