mirror of
https://github.com/System-End/site.git
synced 2026-04-19 19:45:07 +00:00
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import React from 'react'
|
|
|
|
const addClassNameToChildren = (children, className) =>
|
|
React.Children.map(children, child =>
|
|
React.cloneElement(child, {
|
|
className: `${child.props.className || ''} ${className}`
|
|
})
|
|
)
|
|
|
|
const tooltip = direction =>
|
|
function Tooltip({ children, text }) {
|
|
const escapedText = text.replace(/'/g, "\\'")
|
|
|
|
const directionalStyles = {
|
|
e: `
|
|
left: 100%;
|
|
bottom: 50%;
|
|
right: 0;
|
|
margin-left: 0.5rem;
|
|
transform: translateY(50%);
|
|
`,
|
|
w: `
|
|
right: 100%;
|
|
bottom: 50%;
|
|
margin-right: 0.5rem;
|
|
transform: translateY(50%);
|
|
`,
|
|
n: `
|
|
right: 50%;
|
|
bottom: 100%;
|
|
margin-bottom: 0.5rem;
|
|
transform: translateX(50%);
|
|
`,
|
|
s: `
|
|
right: 50%;
|
|
top: 100%;
|
|
margin-top: 0.5rem;
|
|
transform: translateX(50%);
|
|
`
|
|
}[direction || 'e']
|
|
|
|
return (
|
|
<>
|
|
<style jsx>{`.tooltipped {
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 56em) {
|
|
.tooltipped:after {
|
|
background-color: rgba(31, 45, 61, 0.875);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.0625),
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.125);
|
|
color: #ffffff;
|
|
content: '${escapedText}';
|
|
font-family: $font-family;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
height: min-content;
|
|
letter-spacing: 0;
|
|
line-height: 1.375;
|
|
max-width: 16rem;
|
|
min-height: 1.25rem;
|
|
opacity: 0;
|
|
padding: 0.25rem 0.75rem;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 100%;
|
|
text-align: center;
|
|
transform: translateY(50%);
|
|
transition: 0.125s all ease-in-out;
|
|
width: max-content;
|
|
z-index: 1000000;
|
|
|
|
}
|
|
|
|
.tooltipped:hover:after,
|
|
.tooltipped:active:after,
|
|
.tooltipped:focus:after {
|
|
opacity: 1;
|
|
z-index: 9000000;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.tooltipped:after {
|
|
${directionalStyles}
|
|
}
|
|
}`}</style>
|
|
|
|
{children}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const Tooltip = tooltip()
|
|
Tooltip.N = tooltip('n')
|
|
Tooltip.S = tooltip('s')
|
|
Tooltip.E = tooltip('e')
|
|
Tooltip.W = tooltip('w')
|
|
|
|
export { Tooltip }
|
|
export default Tooltip
|