Amio
6 years ago
5 changed files with 91 additions and 11 deletions
@ -0,0 +1,65 @@ |
|||||
|
|
||||
|
export default ({ focus, badgeURL }) => { |
||||
|
const visible = !focus && !badgeURL |
||||
|
const style = { |
||||
|
opacity: visible ? 1 : 0, |
||||
|
pointerEvents: visible ? 'auto' : 'none' |
||||
|
} |
||||
|
return ( |
||||
|
<div className='hints' style={style}> |
||||
|
<Hint left={0} width={50} height={3}> |
||||
|
"badge": default (static) badge generator |
||||
|
</Hint> |
||||
|
<Hint left={66} width={70} height={2}>TEXT</Hint> |
||||
|
<Hint left={153} width={60} height={2}>TEXT</Hint> |
||||
|
<Hint left={230} width={50} height={2}> RGB / COLOR_NAME (optional)</Hint> |
||||
|
<Hint left={290} width={110} height={1}>More Options (icon, label, etc.)</Hint> |
||||
|
<style jsx>{` |
||||
|
.hints { |
||||
|
height: 0; |
||||
|
position: relative; |
||||
|
overflow: visible; |
||||
|
width: 100%; |
||||
|
left: -147px; |
||||
|
transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1); |
||||
|
} |
||||
|
`}</style>
|
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
const Hint = ({ left, width, height, children }) => { |
||||
|
const wrapperPos = { |
||||
|
left: `calc(50% + ${left}px)`, |
||||
|
height: `${height * 54}px`, |
||||
|
width: `${width}px` |
||||
|
} |
||||
|
return ( |
||||
|
<div className='hint' style={wrapperPos}> |
||||
|
<div className='line' /> |
||||
|
<div className='content'>{children}</div> |
||||
|
<style jsx>{` |
||||
|
.hint { |
||||
|
border-top: 2px solid #666; |
||||
|
position: absolute; |
||||
|
} |
||||
|
.line { |
||||
|
border-left: 2px solid #666; |
||||
|
height: calc(100% - 26px); |
||||
|
left: calc(50% - 1px); |
||||
|
position: relative; |
||||
|
} |
||||
|
.content { |
||||
|
min-width: 100%; |
||||
|
text-align: center; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
white-space: nowrap; |
||||
|
font: 16px/24px monospace; |
||||
|
color: #333; |
||||
|
} |
||||
|
`}</style>
|
||||
|
</div> |
||||
|
) |
||||
|
} |
Loading…
Reference in new issue