Add prettier configuration

components/MobileNav/index.tsx

@@ -6,65 +6,69 @@ import IconButton from '../IconButton';
 import Button from '../Button';
 
 const MobileNav = ({ open, close }: Props) => {
-	const { mode, toggle } = useContext(ThemeContext);
-	const ref = useRef<HTMLDivElement>(null);
+  const { mode, toggle } = useContext(ThemeContext);
+  const ref = useRef<HTMLDivElement>(null);
 
-	useEffect(() => {
-		document.addEventListener('mousedown', (event: MouseEvent) => {
-			if (ref.current && ref.current.contains(event.target as Node)) {
-				document.addEventListener('mouseup', event => {
-					if (ref.current && !ref.current.contains(event.target as Node)) return;
-				});
-			} else {
-				document.addEventListener('mouseup', event => {
-					if (ref.current && !ref.current.contains(event.target as Node)) close();
-				});
-			}
-		});
+  useEffect(() => {
+    document.addEventListener('mousedown', (event: MouseEvent) => {
+      if (ref.current && ref.current.contains(event.target as Node)) {
+        document.addEventListener('mouseup', (event) => {
+          if (ref.current && !ref.current.contains(event.target as Node))
+            return;
+        });
+      } else {
+        document.addEventListener('mouseup', (event) => {
+          if (ref.current && !ref.current.contains(event.target as Node))
+            close();
+        });
+      }
+    });
 
-		return () => {
-			document.removeEventListener('mousedown', () => {});
-			document.removeEventListener('mouseup', () => {});
-		};
-	});
+    return () => {
+      document.removeEventListener('mousedown', () => {});
+      document.removeEventListener('mouseup', () => {});
+    };
+  });
 
-	return (
-		<Bar open={open} ref={ref}>
-			<div className='close'>
-				<IconButton
-					alt='Theme toggler'
-					icon={mode === 'dark' ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
-					onClick={close}
-				/>
-			</div>
-			<div className='mobile-button-wrapper'>
-				<Button
-					href='#'
-					onClick={() => {
-						toggle();
-						close();
-					}}
-				>
-					{mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
-				</Button>
-			</div>
-			<div className='mobile-button-wrapper'>
-				<Button href='/projects' onClick={() => close()}>
-					Projects
-				</Button>
-			</div>
-			<div className='mobile-button-wrapper'>
-				<Button href='/blog' onClick={() => close()}>
-					Blog
-				</Button>
-			</div>
-			<div className='mobile-button-wrapper'>
-				<Button href='/contact' onClick={() => close()}>
-					Contact
-				</Button>
-			</div>
-		</Bar>
-	);
+  return (
+    <Bar open={open} ref={ref}>
+      <div className='close'>
+        <IconButton
+          alt='Theme toggler'
+          icon={
+            mode === 'dark' ? '/icons/dark-close.svg' : '/icons/light-close.svg'
+          }
+          onClick={close}
+        />
+      </div>
+      <div className='mobile-button-wrapper'>
+        <Button
+          href='#'
+          onClick={() => {
+            toggle();
+            close();
+          }}
+        >
+          {mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+        </Button>
+      </div>
+      <div className='mobile-button-wrapper'>
+        <Button href='/projects' onClick={() => close()}>
+          Projects
+        </Button>
+      </div>
+      <div className='mobile-button-wrapper'>
+        <Button href='/blog' onClick={() => close()}>
+          Blog
+        </Button>
+      </div>
+      <div className='mobile-button-wrapper'>
+        <Button href='/contact' onClick={() => close()}>
+          Contact
+        </Button>
+      </div>
+    </Bar>
+  );
 };
 
 export default MobileNav;