rotation border

src/components/RotationBorder/RotationBorder.js

@@ -4,14 +4,53 @@ import "./rotationTestStyle.css";
 
 // Web-only rotating gradient border container
 // Props:
-// - active: show rotating gradient when true (default)
+// - 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 }) => {
-  const classes = ["box", active ? "a" : null, className]
+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={style}>
+    <div className={classes} style={inlineStyle}>
       {children}
     </div>
   );