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;

components/MobileNav/styles.tsx

@@ -2,36 +2,36 @@ import styled from 'styled-components';
 import { StyledProps } from './types';
 
 export const Bar = styled.nav<StyledProps>`
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	transform-origin: right;
-	transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
-	width: 80%;
-	height: 100vh;
-	background: var(--text);
-	transition: transform 250ms ease-in-out;
-	display: grid;
-	grid-template-rows: 30% repeat(4, 50px);
-	padding: 1rem 1rem 5rem 1rem;
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  transform-origin: right;
+  transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
+  width: 80%;
+  height: 100vh;
+  background: var(--text);
+  transition: transform 250ms ease-in-out;
+  display: grid;
+  grid-template-rows: 30% repeat(4, 50px);
+  padding: 1rem 1rem 5rem 1rem;
 
-	@media (orientation: landscape) {
-		grid-template-rows: auto;
-	}
+  @media (orientation: landscape) {
+    grid-template-rows: auto;
+  }
 
-	.close {
-		justify-self: flex-end;
-		align-self: flex-start;
-		margin-top: 0.5rem;
-	}
+  .close {
+    justify-self: flex-end;
+    align-self: flex-start;
+    margin-top: 0.5rem;
+  }
 
-	.mobile-button-wrapper {
-		display: flex;
-		margin: 0rem 1rem;
+  .mobile-button-wrapper {
+    display: flex;
+    margin: 0rem 1rem;
 
-		a {
-			color: var(--text-inverted) !important;
-		}
-	}
+    a {
+      color: var(--text-inverted) !important;
+    }
+  }
 `;

components/MobileNav/types.ts

@@ -1,8 +1,8 @@
 export type Props = {
-	open: boolean;
-	close: () => void;
+  open: boolean;
+  close: () => void;
 };
 
 export type StyledProps = {
-	open: boolean;
+  open: boolean;
 };