Refactoring components

components/MDXButton/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
-import { Btn } from './styles';
+import { StyledLink, StyledButton } from './styles';
 
 const MDXButton = ({
 	variant = 'text',
@@ -15,7 +15,7 @@ const MDXButton = ({
 	const { mode } = useContext(ThemeContext);
 
 	return link ? (
-		<Btn
+		<StyledLink
 			href={link}
 			target={target}
 			variant={variant}
@@ -25,11 +25,11 @@ const MDXButton = ({
 			className={className}
 		>
 			{children}
-		</Btn>
+		</StyledLink>
 	) : (
-		<Btn href="#" variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
+		<StyledButton variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
-		</Btn>
+		</StyledButton>
 	);
 };
 

components/MDXButton/styles.tsx

@@ -1,13 +1,12 @@
 import Link from 'next/link';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Props } from './types';
 
-export const Btn = styled(Link)<Props>`
+export const sharedStyles = css<Props>`
 	cursor: pointer;
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
 	width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
-	/* TODO: fix theme blue color problem */
 	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
 	color: ${({ variant, mode }) =>
 		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
@@ -25,9 +24,7 @@ export const Btn = styled(Link)<Props>`
 	text-decoration: none;
 	transition: color 250ms ease-in-out;
 
-	${({ disabled }) =>
-		disabled &&
-		`
+	${({ disabled }) => disabled && `
 		background: gray;
 		cursor: default;
 	`}
@@ -37,3 +34,11 @@ export const Btn = styled(Link)<Props>`
 			['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
 	}
 `;
+
+export const StyledLink = styled(Link)<Props>`
+	${sharedStyles}
+`;
+
+export const StyledButton = styled.button<Omit<Props, 'href'>>`
+	${sharedStyles}
+`;