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 ? + + + {children} + + {text} + { + direction === 'left' ? + : direction === 'center' ? + : + } + + + + + : + + {children} + + {text} + { + direction === 'left' ? + : direction === 'center' ? + : + } + + + + +} + +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 = ({ data, date }) => { if (!data || !data.id) return @@ -55,9 +56,11 @@ const Bots: NextPage = ({ data, date }) => { {data.name}{' '} {data.trusted ? ( - - - + + + + + ) : ''} @@ -105,10 +108,12 @@ const Bots: NextPage = ({ data, date }) => { {Day(date).fromNow(false)} { - data.verified ? - - 디스코드 인증됨 - + data.verified ? + + + 디스코드 인증됨 + + : '' } 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 = ({ data }) => { if (!data.id) return return ( @@ -48,14 +49,18 @@ const Users: NextPage = ({ data }) => { {checkPerm(data.perm, 'staff') && ( - - - + + + + + )} {checkPerm(data.perm, 'bughunter') && ( - - - + + + + + )}