mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
606f3cbc82
* deps: update next.js to 13 * chore: migrate to new Link component * chore: remove future option from next.config * chore: update react-select * chore: enable hideSourceMaps on sentry * chore: assert type as string * chore: make placeholder and value absolute * feat: set timeout for redirect * chore: ignore ts error * chore: add generics * chore: * chore: add ts comment * feat: use dnd-kit instead of react-sortable-hoc * fix: give absolute position to placeholder
116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
const Tooltip: React.FC<TooltipProps> = ({
|
|
href,
|
|
size = 'small',
|
|
children,
|
|
direction = 'center',
|
|
text,
|
|
}) => {
|
|
return href ? (
|
|
(<Link href={href} className='inline'>
|
|
|
|
<div className='relative inline py-3'>
|
|
<div className='group relative inline-block text-center cursor-pointer'>
|
|
{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 left-5 top-full mr-3 h-2 text-black'
|
|
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 left-0 top-full w-full h-2 text-black'
|
|
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 right-5 top-full mr-3 h-2 text-black'
|
|
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>
|
|
|
|
</Link>)
|
|
) : (
|
|
<a className='inline'>
|
|
<div className='relative inline py-3'>
|
|
<div className='group relative inline-block text-center cursor-pointer'>
|
|
{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 left-5 top-full mr-3 h-2 text-black'
|
|
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 left-0 top-full w-full h-2 text-black'
|
|
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 right-5 top-full mr-3 h-2 text-black'
|
|
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
|