From 5267edccb8baa7fc6a92b2cafc73fac2dba159e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Sun, 10 Jan 2021 12:39:46 +0900
Subject: [PATCH] fix: https://github.com/koreanbots/v2-testing/issues/6

---
 components/LongButton.tsx | 21 +++++++++++++++------
 components/Tag.tsx        | 24 +++++++++++++++++++++++-
 pages/bots/[id].tsx       |  1 +
 pages/users/[id].tsx      |  1 +
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/components/LongButton.tsx b/components/LongButton.tsx
index 67029bb..4b54043 100644
--- a/components/LongButton.tsx
+++ b/components/LongButton.tsx
@@ -1,12 +1,20 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import Link from 'next/link'
 
-const LongButton = ({ children, href, onClick, center=false }:LongButtonProps):JSX.Element => {
-	if(href) return <Link href={href}>
-		<div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
-			{children}
-		</div>
-	</Link>
+const LongButton = ({ children, newTab=false, href, onClick, center=false }:LongButtonProps):JSX.Element => {
+	if(href) {
+		if(newTab)  return <a href={href} rel="noopener noreferrer"
+			target="_blank">
+			<div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
+				{children}
+			</div>
+		</a>
+		else  return <Link href={href}>
+			<div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
+				{children}
+			</div>
+		</Link>
+	}
 	if(onClick) return <div onKeyDown={onClick} onClick={onClick} className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
 		{children}
 	</div>
@@ -22,6 +30,7 @@ const LongButton = ({ children, href, onClick, center=false }:LongButtonProps):J
 export default LongButton
 
 interface LongButtonProps {
+		newTab?: boolean
     onClick?: (event: React.KeyboardEvent<HTMLDivElement>|React.MouseEvent<HTMLDivElement>) => void
     children: JSX.Element | JSX.Element[]
 		href?: string
diff --git a/components/Tag.tsx b/components/Tag.tsx
index ae722e6..c921627 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -9,8 +9,29 @@ const Tag = ({
 	circular = false,
 	dark = false,
 	marginBottom = 2,
+	newTab = false
 }: LabelProps): JSX.Element => {
-	return href ? (
+	return href ? newTab ? (
+		<a
+			href={href}
+			rel="noopener noreferrer"
+			target="_blank"
+			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 href={href}>
 			<a
 				className={`${className ?? ''} text-center text-base  ${
@@ -57,6 +78,7 @@ interface LabelProps {
 	circular?: boolean
 	dark?: boolean
 	marginBottom?: number
+	newTab?: boolean
 }
 
 export default Tag
diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 80ff42b..64ff043 100644
--- a/pages/bots/[id].tsx
+++ b/pages/bots/[id].tsx
@@ -65,6 +65,7 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 				</div>
 				<div className="w-full lg:w-1/4">
 					<LongButton
+						newTab
 						href={
 							data.url ??
 							`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index e66ba0c..0ea0481 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -62,6 +62,7 @@ const Users: NextPage<UserProps> = ({ data }) => {
 						<br />
 						{data.github && (
 							<Tag
+								newTab
 								text={
 									<>
 										<i className="fab fa-github" /> {data.github}