From 07f2ee6966e93911fabcdb5edc23415436788969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Fri, 8 Jan 2021 22:19:10 +0900
Subject: [PATCH] feat: added props

---
 components/Tag.tsx | 66 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 55 insertions(+), 11 deletions(-)

diff --git a/components/Tag.tsx b/components/Tag.tsx
index 0a74e85..ae722e6 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -1,18 +1,62 @@
 import Link from 'next/link'
 
-const Tag = ({ href, text, circular=false, dark=false, marginBottom=2 }:LabelProps):JSX.Element => {
-	return href ? <Link href={href}>
-		<a className={`text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`}>{text}</a>
-	</Link> : <a className={`text-base ${dark ? 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white dark:bg-discord-black'} text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom}`}>{text}</a>
+const Tag = ({
+	blurple = false,
+	github = false,
+	href,
+	text,
+	className,
+	circular = false,
+	dark = false,
+	marginBottom = 2,
+}: LabelProps): JSX.Element => {
+	return href ? (
+		<Link href={href}>
+			<a
+				className={`${className ?? ''} text-center text-base  ${
+					dark
+						? blurple
+							? 'bg-discord-blurple'
+							: 'bg-little-white-hover dark:bg-very-black'
+						: github
+							? 'bg-gray-900 text-white'
+							: 'bg-little-white dark:bg-discord-black'
+				} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
+					circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
+				} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`}
+			>
+				{text}
+			</a>
+		</Link>
+	) : (
+		<a
+			className={`${className ?? ''} text-center text-base ${
+				dark
+					? blurple
+						? 'font-bg text-white bg-discord-blurple text-black'
+						: github
+							? 'bg-gray-900 text-white'
+							: 'bg-little-white-hover dark:bg-very-black'
+					: 'bg-little-white dark:bg-discord-black'
+			} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
+				circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
+			} mr-1 mb-${marginBottom}`}
+		>
+			{text}
+		</a>
+	)
 }
 
 interface LabelProps {
-  href?: string
-  text: string | JSX.Element | JSX.Element[]
-  icon?: string
-  circular?: boolean
-  dark?: boolean
-  marginBottom?: number
+	blurple?: boolean
+	github?: boolean
+	href?: string
+	text: string | JSX.Element | JSX.Element[]
+	className?: string
+	icon?: string
+	circular?: boolean
+	dark?: boolean
+	marginBottom?: number
 }
 
-export default Tag
\ No newline at end of file
+export default Tag