60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
|
|
import './rotationTestStyle.css'
|
|
|
|
// Web-only rotating gradient border container
|
|
// Props:
|
|
// - active: animate rotation (default true)
|
|
// - colors: [primary, secondary] gradient colors
|
|
// - duration: animation duration in seconds
|
|
// - borderWidth: width of the gradient border (px)
|
|
// - borderRadius: optional corner radius (px)
|
|
// - fillColor: background color applied inside the border
|
|
// - style, className: optional DOM styles/classes
|
|
const RotationBorder = ({
|
|
children,
|
|
style,
|
|
className,
|
|
active = true,
|
|
colors = ['#F94697', '#7023F7'],
|
|
duration = 5,
|
|
borderWidth = 1,
|
|
borderRadius,
|
|
fillColor = 'transparent',
|
|
}) => {
|
|
const classes = [
|
|
'rotation-border',
|
|
active ? 'rotation-border--active' : 'rotation-border--static',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
|
|
const inlineStyle = { ...style }
|
|
|
|
inlineStyle['--rotation-border-width'] = `${borderWidth}px`
|
|
inlineStyle['--rotation-border-color-1'] = colors[0]
|
|
inlineStyle['--rotation-border-color-2'] = colors[1] ?? colors[0]
|
|
inlineStyle['--rotation-border-duration'] = `${duration}s`
|
|
inlineStyle['--rotation-border-fill'] = fillColor
|
|
|
|
if (typeof borderRadius !== 'undefined') {
|
|
inlineStyle.borderRadius = borderRadius
|
|
}
|
|
|
|
if (typeof inlineStyle.borderRadius !== 'undefined') {
|
|
inlineStyle['--rotation-border-radius'] =
|
|
typeof inlineStyle.borderRadius === 'number'
|
|
? `${inlineStyle.borderRadius}px`
|
|
: inlineStyle.borderRadius
|
|
}
|
|
|
|
return (
|
|
<div className={classes} style={inlineStyle}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RotationBorder
|