Add prettier configuration

components/MDXButton/index.tsx

@@ -4,33 +4,39 @@ import { Props } from './types';
 import { StyledLink, StyledButton } from './styles';
 
 const MDXButton = ({
-	variant = 'text',
-	type = 'button',
-	link,
-	target,
-	children,
-	disabled,
-	className
+  variant = 'text',
+  type = 'button',
+  link,
+  target,
+  children,
+  disabled,
+  className,
 }: Props) => {
-	const { mode } = useContext(ThemeContext);
+  const { mode } = useContext(ThemeContext);
 
-	return link ? (
-		<StyledLink
-			href={link}
-			target={target}
-			variant={variant}
-			type={type}
-			mode={mode}
-			disabled={disabled}
-			className={className}
-		>
-			{children}
-		</StyledLink>
-	) : (
-		<StyledButton variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
-			{children}
-		</StyledButton>
-	);
+  return link ? (
+    <StyledLink
+      href={link}
+      target={target}
+      variant={variant}
+      type={type}
+      mode={mode}
+      disabled={disabled}
+      className={className}
+    >
+      {children}
+    </StyledLink>
+  ) : (
+    <StyledButton
+      variant={variant}
+      type={type}
+      mode={mode}
+      disabled={disabled}
+      className={className}
+    >
+      {children}
+    </StyledButton>
+  );
 };
 
 export default MDXButton;

components/MDXButton/styles.tsx

@@ -3,42 +3,51 @@ import styled, { css } from 'styled-components';
 import { Props } from './types';
 
 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')};
-	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
-	color: ${({ variant, mode }) =>
-		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
-	border: ${({ variant, mode }) =>
-		variant === 'outline' ? `2px solid ${mode === '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;
+  cursor: pointer;
+  display: ${({ variant }) =>
+    ['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
+  width: ${({ variant }) =>
+    ['action', 'outline'].includes(variant as string) ? '100%' : 'auto'};
+  background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
+  color: ${({ variant, mode }) =>
+    variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
+  border: ${({ variant, mode }) =>
+    variant === 'outline'
+      ? `2px solid ${mode === '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 && `
+  ${({ disabled }) =>
+    disabled &&
+    `
 		background: gray;
 		cursor: default;
 	`}
 
-	@media (max-width: 768px) {
-		padding: ${({ variant }) =>
-			['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
-	}
+  @media (max-width: 768px) {
+    padding: ${({ variant }) =>
+      ['action', 'outline'].includes(variant as string)
+        ? '.5rem .75rem'
+        : '0rem'};
+  }
 `;
 
 export const StyledLink = styled(Link)<Props>`
-	${sharedStyles}
+  ${sharedStyles}
 `;
 
 export const StyledButton = styled.button<Omit<Props, 'href'>>`
-	${sharedStyles}
+  ${sharedStyles}
 `;

components/MDXButton/types.ts

@@ -1,10 +1,10 @@
 export type Props = {
-	variant?: 'outline' | 'text' | 'action';
-	type?: 'button' | 'submit';
-	link?: string;
-	target?: HTMLAnchorElement['target'];
-	mode?: string;
-	disabled?: boolean;
-	className?: string;
-	children: React.ReactNode;
+  variant?: 'outline' | 'text' | 'action';
+  type?: 'button' | 'submit';
+  link?: string;
+  target?: HTMLAnchorElement['target'];
+  mode?: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
 };