Update dependencies and fix introduced errors

components/Button/index.tsx

@@ -1,24 +1,17 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
-import { Btn } from './styles';
-import Link from 'next/link';
+import { StyledButton } from './styles';
 
-const Button: FC<Props & { className?: string }> = ({
+const Button = ({
 	variant = 'text',
 	href,
 	target,
 	onClick,
 	children,
 	className
-}) => {
-	return (
-		<Link href={href} passHref>
-			<Btn as='a' target={target} variant={variant} onClick={onClick} className={className}>
-				{children}
-			</Btn>
-		</Link>
-	);
-};
+}: Props) => (
+	<StyledButton href={href} target={target} className={className} onClick={onClick} variant={variant}>
+		{children}
+	</StyledButton>
+);
 
 export default Button;

components/Button/styles.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Props } from './types';
 
-export const Btn = styled.button<Omit<Props, 'href'>>`
+export const StyledButton = styled(Link)<Props>`
 	position: relative;
 	display: inline;
 	cursor: pointer;

components/Button/types.ts

@@ -3,4 +3,6 @@ export type Props = {
 	href: string;
 	target?: HTMLAnchorElement['target'];
 	onClick?: () => void;
+	children: React.ReactNode;
+	className?: string;
 };

components/Card/index.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { StyledCard } from './styles';
 import Image from 'next/image';
-import Link from 'next/link';
 
 interface Props {
 	title: string;
@@ -15,26 +14,24 @@ interface Props {
 
 const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
 	return (
-		<Link href={href} passHref>
-			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
-				<div className='card-content'>
-					<h3>{title}</h3>
-					<p>{description}</p>
-					{tags && (
-						<div className='tags-wrapper'>
-							{tags.map((tag, index) => (
-								<span key={index}>#{tag}&nbsp;</span>
-							))}
-						</div>
-					)}
-				</div>
-				{image && (
-					<div className='card-image'>
-						<Image src={image} layout='fill' objectFit='cover' />
+		<StyledCard href={href} onClick={onClick} image={!!image} target={target}>
+			<div className='card-content'>
+				<h3>{title}</h3>
+				<p>{description}</p>
+				{tags && (
+					<div className='tags-wrapper'>
+						{tags.map((tag, index) => (
+							<span key={index}>#{tag}&nbsp;</span>
+						))}
 					</div>
 				)}
-			</StyledCard>
-		</Link>
+			</div>
+			{image && (
+				<div className='card-image'>
+					<Image alt={title} src={image} fill />
+				</div>
+			)}
+		</StyledCard>
 	);
 };
 

components/Card/styles.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import Link from 'next/link';
 
-export const StyledCard = styled.div<{ image: boolean }>`
+export const StyledCard = styled(Link)<{ image: boolean }>`
 	cursor: pointer;
 	width: 100%;
 	display: grid;

components/CodeBlock/index.tsx

@@ -3,7 +3,7 @@ import Highlight, { defaultProps, Language } from 'prism-react-renderer';
 import theme from 'prism-react-renderer/themes/vsDark';
 import { Line, LineContent, LineNo, Pre } from './styles';
 
-const CodeBlock: FC<{ className: string }> = ({ children, className }) => {
+const CodeBlock: FC<{ className: string, children: React.ReactNode }> = ({ children, className }) => {
 	const language = className.replace(/language-/, '') as Language;
 
 	return (

components/GlobalStyles.tsx

@@ -39,7 +39,7 @@ const GlobalStyles = createGlobalStyle`
 	}
 
 	* {
-    color: var(--text);
+    	color: var(--text);
 	}
 	
 	ul, ol {
@@ -67,6 +67,10 @@ const GlobalStyles = createGlobalStyle`
 	body::-webkit-scrollbar-thumb {
 		background-color: var(--text) !important;
 	}
+
+	a {
+		text-decoration: none;
+	}
 `;
 
 export default GlobalStyles;

components/IconButton.tsx

@@ -12,7 +12,7 @@ interface Props {
 	onClick?: () => void;
 }
 
-const Btn = styled.button`
+const Btn = styled(Link)`
 	cursor: pointer;
 	background: none;
 	border: none;
@@ -30,15 +30,13 @@ const IconButton: FC<Props & { className?: string }> = ({
 	height = 24
 }) => {
 	return !href ? (
-		<Btn onClick={onClick} className={className}>
-			<Image src={icon} width={width} height={height} />
+		<Btn href='#' onClick={onClick} className={className}>
+			<Image alt='' src={icon} width={width} height={height} />
 		</Btn>
 	) : (
-		<Link href={href} passHref>
-			<Btn as='a' target={target} onClick={onClick} className={className}>
-				<Image src={icon} width={width} height={height} />
-			</Btn>
-		</Link>
+		<Btn href={href} target={target} onClick={onClick} className={className}>
+			<Image alt='' src={icon} width={width} height={height} />
+		</Btn>
 	);
 };
 

components/MDXButton/index.tsx

@@ -1,10 +1,9 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
-import Link from 'next/link';
 
-const MDXButton: FC<Props & { className?: string }> = ({
+const MDXButton = ({
 	variant = 'text',
 	type = 'button',
 	link,
@@ -12,25 +11,23 @@ const MDXButton: FC<Props & { className?: string }> = ({
 	children,
 	disabled,
 	className
-}) => {
+}: Props) => {
 	const { mode } = useContext(ThemeContext);
 
 	return link ? (
-		<Link href={link} passHref>
-			<Btn
-				as='a'
-				target={target}
-				variant={variant}
-				type={type}
-				mode={mode}
-				disabled={disabled}
-				className={className}
-			>
-				{children}
-			</Btn>
-		</Link>
+		<Btn
+			href={link}
+			target={target}
+			variant={variant}
+			type={type}
+			mode={mode}
+			disabled={disabled}
+			className={className}
+		>
+			{children}
+		</Btn>
 	) : (
-		<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
+		<Btn href="#" variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
 		</Btn>
 	);

components/MDXButton/styles.tsx

@@ -1,7 +1,8 @@
+import Link from 'next/link';
 import styled from 'styled-components';
 import { Props } from './types';
 
-export const Btn = styled.button<Props>`
+export const Btn = styled(Link)<Props>`
 	cursor: pointer;
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};

components/MDXButton/types.ts

@@ -5,4 +5,6 @@ export type Props = {
 	target?: HTMLAnchorElement['target'];
 	mode?: string;
 	disabled?: boolean;
+	className?: string;
+	children: React.ReactNode;
 };

components/Nav/index.tsx

@@ -13,17 +13,15 @@ const Nav: FC = () => {
 
 	return (
 		<Bar>
-			<Link href='/' passHref>
-				<a className='logo'>
-					<Image
-						className='logo-image'
-						src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
-						alt='Logo Image'
-						width={48}
-						height={48}
-					/>
-					<h1>Hazem Krimi</h1>
-				</a>
+			<Link className='logo' href='/'>
+				<Image
+					className='logo-image'
+					src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
+					alt='Logo Image'
+					width={48}
+					height={48}
+				/>
+				<h1>Hazem Krimi</h1>
 			</Link>
 			<div className='buttons'>
 				<IconButton

components/index.ts

@@ -1,14 +0,0 @@
-import { CodePen, Gist, YouTube, CodeSandbox, Vimeo, Tweet } from 'mdx-embed';
-import Image from 'next/image';
-import MDXButton from './MDXButton';
-
-export default {
-	Button: MDXButton,
-	Image,
-	CodePen,
-	Gist,
-	Vimeo,
-	CodeSandbox,
-	Tweet,
-	YouTube
-};