refactor: improve typescript code quality (#1)

.eslintrc

@@ -24,5 +24,10 @@
 		"semi": ["warn", "always"],
 		"@typescript-eslint/no-explicit-any": "off",
 		"@typescript-eslint/explicit-module-boundary-types": "off"
+	},
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
 	}
 }

.prettierignore

@@ -1,4 +1,2 @@
 /node_modules
-.next
-*.jsx
-*.tsx
+.next

components/Cards.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import styled from 'styled-components';
@@ -18,7 +19,7 @@ interface Props {
 	};
 }
 
-const Cards: React.FC<Props> = ({ post }) => {
+const Cards: React.FC<Props> = ({ post }: Props) => {
 	const stats = readingTime(post.content);
 	return (
 		<CardWrapper>
@@ -76,8 +77,7 @@ const CardWrapper = styled.div`
 	}
 	.card-container {
 		margin: 0 auto;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 		border-radius: 0.75rem;
 		overflow: hidden;
 		@media (min-width: 768px) {

components/Contact.tsx

@@ -1,60 +1,51 @@
+import React from 'react';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
-import {
-	FaGithub,
-	FaLinkedin,
-	FaInstagram,
-	FaFacebookSquare,
-} from 'react-icons/fa';
+import { FaGithub, FaLinkedin, FaInstagram, FaFacebookSquare } from 'react-icons/fa';
 import { fadeInUp, stagger } from '../utils/animate';
 
 const Contact: React.FC = () => {
 	return (
-		<motion.div
-			exit={{ opacity: 0 }}
-			variants={stagger}
-			initial="initial"
-			animate="animate"
-		>
+		<motion.div exit={{ opacity: 0 }} variants={stagger} initial="initial" animate="animate">
 			<ContactWrapper>
 				<div className="header">
 					<motion.h1 variants={fadeInUp}>Contact Me</motion.h1>
 					<motion.p variants={fadeInUp}>
 						Hi there, you can reach me by follow my social media or email me at
-						[email protected]. I am quite active at Facebook and Instagram,
-						feel free to leave me a message :)
+						[email protected]. I am quite active at Facebook and Instagram, feel free to leave me
+						a message :)
 					</motion.p>
 				</div>
 				<motion.div variants={fadeInUp} className="icons">
 					<a
 						href="https://github.com/retr00exe"
 						aria-label="Github"
 						target="_blank"
-						rel="noopener"
+						rel="noopener noreferrer"
 					>
 						<FaGithub className="icon github" />
 					</a>
 					<a
 						href="https://www.linkedin.com/in/mekelilyasa/"
 						aria-label="Linkedin"
 						target="_blank"
-						rel="noopener"
+						rel="noopener noreferrer"
 					>
 						<FaLinkedin className="icon linkedin" />
 					</a>
 					<a
 						href="https://www.instagram.com/mekelilyasa/"
 						aria-label="Instagram"
 						target="_blank"
-						rel="noopener"
+						rel="noopener noreferrer"
 					>
 						<FaInstagram className="icon instagram" />
 					</a>
 					<a
 						href="https://www.facebook.com/mekel.ilyasa/"
 						aria-label="Facebook"
 						target="_blank"
-						rel="noopener"
+						rel="noopener noreferrer"
 					>
 						<FaFacebookSquare className="icon facebook" />
 					</a>

components/Footer.tsx

@@ -1,22 +1,18 @@
+import React from 'react';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { fadeInUp } from '../utils/animate';
 
 const Footer: React.FC = () => {
 	return (
 		<FooterWrapper>
-			<motion.p
-				exit={{ opacity: 0 }}
-				initial="initial"
-				animate="animate"
-				variants={fadeInUp}
-			>
+			<motion.p exit={{ opacity: 0 }} initial="initial" animate="animate" variants={fadeInUp}>
 				Made with ❤️ using{' '}
-				<a href="https://nextjs.org/" target="_blank" rel="noopener">
+				<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">
 					Next.js
 				</a>{' '}
 				&{' '}
-				<a href="https://strapi.io/" target="_blank" rel="noopener">
+				<a href="https://strapi.io/" target="_blank" rel="noopener noreferrer">
 					Strapi
 				</a>
 			</motion.p>

components/Navbar.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import styled from 'styled-components';
@@ -11,22 +12,21 @@ interface Props {
 	title?: string;
 }
 
-const Navbar: React.FC<Props> = (props) => {
+const Navbar: React.FC<Props> = (props: Props) => {
 	const router = useRouter();
 	const { theme, setTheme } = useTheme();
 	return (
 		<NavbarItems>
-			<motion.div
-				exit={{ opacity: 0 }}
-				initial="initial"
-				animate="animate"
-				className="container"
-			>
+			<motion.div exit={{ opacity: 0 }} initial="initial" animate="animate" className="container">
 				{props.active ? (
 					<motion.div variants={fadeInDown}>
 						<p
 							onClick={() =>
-								window.scroll({ top: 0, left: 0, behavior: 'smooth' })
+								window.scroll({
+									top: 0,
+									left: 0,
+									behavior: 'smooth',
+								})
 							}
 							style={{ overflow: 'hidden' }}
 						>
@@ -43,23 +43,17 @@ const Navbar: React.FC<Props> = (props) => {
 						<motion.ul variants={fadeInDown} className="link-container">
 							<li className="nav-link">
 								<Link href="/">
-									<a className={router.pathname === '/' ? 'active' : ''}>
-										Home
-									</a>
+									<a className={router.pathname === '/' ? 'active' : ''}>Home</a>
 								</Link>
 							</li>
 							<li className="nav-link">
 								<Link href="/about">
-									<a className={router.pathname === '/about' ? 'active' : ''}>
-										About
-									</a>
+									<a className={router.pathname === '/about' ? 'active' : ''}>About</a>
 								</Link>
 							</li>
 							<li className="nav-link">
 								<Link href="/contact">
-									<a className={router.pathname === '/contact' ? 'active' : ''}>
-										Contact
-									</a>
+									<a className={router.pathname === '/contact' ? 'active' : ''}>Contact</a>
 								</Link>
 							</li>
 						</motion.ul>
@@ -87,8 +81,7 @@ const NavbarItems = styled.nav`
 	align-items: center;
 	justify-content: center;
 	z-index: 999;
-	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-		0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	transition-duration: 0.6s;
 	transition-timing-function: ease;
 	p {

components/elements/Anchor.tsx

@@ -1,10 +1,12 @@
+import React from 'react';
 interface Props {
 	href: string;
+	children: React.ReactNode;
 }
 
-const Anchor: React.FC<Props> = ({ href, children }) => {
+const Anchor: React.FC<Props> = ({ href, children }: Props) => {
 	return (
-		<a style={{ color: 'blue' }} href={href} target="_blank" rel="noopener">
+		<a style={{ color: 'blue' }} href={href} target="_blank" rel="noopener noreferrer">
 			{children}
 		</a>
 	);

components/elements/BlockQuote.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import styled from 'styled-components';
 
 interface Props {
 	children: string;
 }
 
-const BlockQuote: React.FC<Props> = ({ children }) => {
+const BlockQuote: React.FC<Props> = ({ children }: Props) => {
 	return <BlockQuoteContainer>{children}</BlockQuoteContainer>;
 };
 

components/elements/CodeBlock.tsx

@@ -7,7 +7,7 @@ interface Props {
 	value: any;
 }
 
-const CodeBlock: React.FC<Props> = ({ value }) => {
+const CodeBlock: React.FC<Props> = ({ value }: Props) => {
 	return (
 		<SyntaxHighlighter language="python" style={dracula} wrapLines>
 			{value}

components/elements/Image.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 const Image: React.FC = (props) => {

components/elements/Spinner.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import Loader from 'react-loader-spinner';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';