37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
import themes from 'shared/themes/runtime.js'
|
|
|
|
const svg = (color, d, shadowShift) => `url('data:image/svg+xml;base64,` +
|
|
Buffer.from(`<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
stroke="none"
|
|
viewBox="0 0 10 8"
|
|
width="20"
|
|
height="16"
|
|
>
|
|
<path d="${d}" fill="rgba(0,0,0,0.5)" transform="translate(0 ${shadowShift})" style="filter: blur(1px)" />
|
|
<path d="${d}" fill="${color}" />
|
|
</svg>`
|
|
).toString('base64') + `')`
|
|
|
|
const topSvg = (color) => svg(color, "M0,0 L0,2 L 5,7 L 10,2 L10,0 z", 1)
|
|
const bottomSvg = (color) => svg(color, "M0,8 L0,6 L 5,1 L 10,6 L10,8 z", -1)
|
|
const style = { backgroundRepeat: 'repeat-x' }
|
|
|
|
const PinkedRibbon = ({ top='base', bottom='dark', loading=false, theme='light' }) => {
|
|
|
|
if (top === 'base') top = themes[theme].base
|
|
else if (top === 'dark') top = themes[theme].dark
|
|
if (bottom === 'base') bottom = themes[theme].base
|
|
else if (bottom === 'dark') bottom = themes[theme].dark
|
|
|
|
return (
|
|
<div className={`theme-gradient h-14 ${loading ? 'loading' : ''} flex flex-col justify-between p-0`}>
|
|
{top && <div style={{ ...style, backgroundImage: topSvg(top), backgroundPosition: 'top left' }}> </div>}
|
|
{bottom && <div style={{ ...style, backgroundImage: bottomSvg(bottom), backgroundPosition: 'bottom left' }}> </div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PinkedRibbon
|
|
|