Refactoring components

components/IconButton/index.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import { Props } from './types';
+import { StyledButton, StyledLink } from './styles';
+
+const IconButton = ({
+	alt,
+	icon,
+	href,
+	target,
+	onClick,
+	className,
+	width = 24,
+	height = 24
+}: Props) =>  href ? (
+		<StyledLink href={href} target={target} onClick={onClick} className={className}>
+			<Image alt={alt} src={icon} width={width} height={height} />
+		</StyledLink>
+	) : (
+		<StyledButton onClick={onClick} className={className}>
+			<Image alt={alt} src={icon} width={width} height={height} />
+		</StyledButton>
+	);
+
+export default IconButton;

components/IconButton/styles.tsx

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+import Link from 'next/link';
+
+const sharedStyles = css`
+    cursor: pointer;
+	background: none;
+	border: none;
+	display: inline-flex;
+	align-items: center;
+`;
+
+export const StyledLink = styled(Link)`
+	${sharedStyles}
+`;
+
+export const StyledButton = styled.button`
+    ${sharedStyles}
+`;

components/IconButton/types.ts

@@ -0,0 +1,10 @@
+export interface Props {
+	alt: string;
+	icon: string;
+	width?: number;
+	height?: number;
+	href?: string;
+	target?: HTMLAnchorElement['target'];
+	onClick?: () => void;
+    className?: string;
+}