fix: https://github.com/koreanbots/v2-testing/issues/6

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

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

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`

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}