From 35854d2f7962122f31f6beb6e958e7c2a189a27c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Thu, 14 Jan 2021 13:27:08 +0900
Subject: [PATCH] feat: https://github.com/koreanbots/v2-testing/issues/12

---
 components/Tooltip.tsx | 43 ++++++++++++++++++++++++++++++++++++++++++
 pages/bots/[id].tsx    | 19 ++++++++++++-------
 pages/users/[id].tsx   | 17 +++++++++++------
 3 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 components/Tooltip.tsx

diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
new file mode 100644
index 0000000..8aa4da4
--- /dev/null
+++ b/components/Tooltip.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+
+const Tooltip = ({ href, size='small', children, direction='center', text }:TooltipProps):JSX.Element => {
+	return href ? <Link href={href}>
+		<a className='inline'>
+			<div className='relative py-3 inline'>
+				<div className='group cursor-pointer relative inline-block text-center'>{children}
+					<div className={`opacity-0 ${size==='small' ? 'w-44' : 'w-60'} bg-black text-white text-center text-xs rounded-lg py-2 px-3 absolute z-10 group-hover:opacity-100 bottom-full -left-4 pointer-events-none`}>
+						{text}
+						{
+							direction === 'left' ? <svg className='absolute text-black h-2 left-5 mr-3 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+								: direction === 'center' ?  <svg className='absolute text-black h-2 w-full left-0 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+									: <svg className='absolute text-black h-2 right-5 mr-3 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+						}
+					</div>
+				</div>
+			</div>
+		</a>
+	</Link> : <a className='inline'>
+		<div className='relative py-3 inline'>
+			<div className='group cursor-pointer relative inline-block text-center'>{children}
+				<div className={`opacity-0 ${size==='small' ? 'w-44' : 'w-60'} bg-black text-white text-center text-xs rounded-lg py-2 px-3 absolute z-10 group-hover:opacity-100 bottom-full -left-4 pointer-events-none`}>
+					{text}
+					{
+						direction === 'left' ? <svg className='absolute text-black h-2 left-5 mr-3 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+							: direction === 'center' ?  <svg className='absolute text-black h-2 w-full left-0 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+								: <svg className='absolute text-black h-2 right-5 mr-3 top-full' x='0px' y='0px' viewBox='0 0 255 255' xmlSpace='preserve'><polygon className='fill-current' points='0,0 127.5,127.5 255,0'/></svg>
+					}
+				</div>
+			</div>
+		</div>
+	</a>
+}
+
+interface TooltipProps {
+  href?: string
+  size?: 'small' | 'large'
+  direction?: 'left' | 'center' | 'right'
+  text: string
+  children: JSX.Element | JSX.Element[]
+}
+
+export default Tooltip
\ No newline at end of file
diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 29ed1a4..b73681e 100644
--- a/pages/bots/[id].tsx
+++ b/pages/bots/[id].tsx
@@ -18,6 +18,7 @@ import { Query } from '../../utils'
 import { formatNumber } from '../../utils/Tools'
 import Advertisement from '../../components/Advertisement'
 import Link from 'next/link'
+import Tooltip from '../../components/Tooltip'
 
 const Bots: NextPage<BotsProps> = ({ data, date }) => {
 	if (!data || !data.id) return <NotFound />
@@ -55,9 +56,11 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 						<h1 className='mb-2 mt-3 text-4xl font-bold'>
 							{data.name}{' '}
 							{data.trusted ? (
-								<span className='text-koreanbots-blue text-3xl'>
-									<i className='fas fa-award' />
-								</span>
+								<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
+									<span className='text-koreanbots-blue text-3xl'>
+										<i className='fas fa-award' />
+									</span>
+								</Tooltip>
 							) : ''}
 						</h1>
 					</div>
@@ -105,10 +108,12 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 						</div>
 						<div>{Day(date).fromNow(false)}</div>
 						{
-							data.verified ? 
-								<div>
-									<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
-								</div>
+							data.verified ?
+								<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
+									<div>
+										<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
+									</div>
+								</Tooltip>
 								: ''
 						}
 					</div>
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index 3b568b7..3c7879b 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -14,6 +14,7 @@ import BotCard from '../../components/BotCard'
 import Tag from '../../components/Tag'
 import { checkPerm } from '../../utils/Tools'
 import Advertisement from '../../components/Advertisement'
+import Tooltip from '../../components/Tooltip'
 const Users: NextPage<UserProps> = ({ data }) => {
 	if (!data.id) return <NotFound />
 	return (
@@ -48,14 +49,18 @@ const Users: NextPage<UserProps> = ({ data }) => {
 						<br />
 						<div className='badges flex'>
 							{checkPerm(data.perm, 'staff') && (
-								<div className='pr-5 text-koreanbots-blue text-2xl'>
-									<i className='fas fa-hammer' />
-								</div>
+								<Tooltip text='한국 디스코드봇 리스트 스탭입니다.' direction='left'>
+									<div className='pr-5 text-koreanbots-blue text-2xl'>
+										<i className='fas fa-hammer' />
+									</div>
+								</Tooltip>
 							)}
 							{checkPerm(data.perm, 'bughunter') && (
-								<div className='pr-5 text-green-500 text-2xl'>
-									<i className='fas fa-bug' />
-								</div>
+								<Tooltip text='버그를 많이 제보해주신 분입니다.' direction='left'>
+									<div className='pr-5 text-green-500 text-2xl'>
+										<i className='fas fa-bug' />
+									</div>
+								</Tooltip>
 							)}
 						</div>
 						<br />