Update folder structure for pages and some components

components/MDXButton/index.tsx

@@ -0,0 +1,39 @@
+import { FC, useContext } from 'react';
+import { DarkModeContext } from '../../components/DarkMode';
+import { Props } from './types';
+import { Btn } from './styles';
+import Link from 'next/link';
+
+const MDXButton: FC<Props & { className?: string }> = ({
+	variant = 'text',
+	type = 'button',
+	link,
+	target,
+	children,
+	disabled,
+	className
+}) => {
+	const { dark } = useContext(DarkModeContext);
+
+	return link ? (
+		<Link href={link} passHref>
+			<Btn
+				as='a'
+				target={target}
+				variant={variant}
+				type={type}
+				dark={dark}
+				disabled={disabled}
+				className={className}
+			>
+				{children}
+			</Btn>
+		</Link>
+	) : (
+		<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
+			{children}
+		</Btn>
+	);
+};
+
+export default MDXButton;

components/MDXButton/styles.tsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { Props } from './types';
+
+export const Btn = styled.button<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, theme }) => (variant === 'action' ? '#1573CA' : 'none')};
+	color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
+	border: ${({ variant, dark }) =>
+		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
+	font-weight: bold;
+	font-size: ${({ variant }) =>
+		['action', 'outline'].includes(variant as string) ? '1.05rem' : 'inherit'};
+	text-transform: ${({ variant }) =>
+		['action', 'outline'].includes(variant as string) ? 'uppercase' : 'inherit'};
+	padding: ${({ variant }) =>
+		['action', 'outline'].includes(variant as string) ? '.5rem 1rem' : '0rem'};
+	text-align: ${({ variant }) =>
+		['action', 'outline'].includes(variant as string) ? 'center' : 'left'};
+	text-decoration: none;
+	transition: color 250ms ease-in-out;
+
+	${({ disabled }) =>
+		disabled &&
+		`
+		background: gray;
+		cursor: default;
+	`}
+
+	@media (max-width: 768px) {
+		padding: ${({ variant }) =>
+			['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
+	}
+`;

components/MDXButton/types.ts

@@ -0,0 +1,8 @@
+export type Props = {
+	variant?: 'outline' | 'text' | 'action';
+	type?: 'button' | 'submit';
+	link?: string;
+	target?: HTMLAnchorElement['target'];
+	dark?: boolean;
+	disabled?: boolean;
+};