lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
83 lines (81 loc) • 4.35 kB
JavaScript
// @ts-nocheck
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from "react";
import { motion } from "framer-motion";
import { Sun, Cloud, MessageSquare, Briefcase, Zap } from "lucide-react";
// --- Default Orbits ---
const defaultOrbits = [
{
id: 1,
radiusFactor: 0.15,
speed: 7,
icon: _jsx(Zap, { className: "text-yellow-400" }),
iconSize: 20,
orbitColor: "rgba(255, 193, 7, 0.4)",
orbitThickness: 1.5,
},
{
id: 2,
radiusFactor: 0.35,
speed: 12,
icon: _jsx(MessageSquare, { className: "text-sky-500" }),
iconSize: 24,
orbitThickness: 1.5,
},
{
id: 3,
radiusFactor: 0.55,
speed: 9,
icon: _jsx(Briefcase, { className: "text-green-500" }),
iconSize: 28,
orbitColor: "rgba(76, 175, 80, 0.4)",
orbitThickness: 2,
},
{
id: 4,
radiusFactor: 0.75,
speed: 15,
icon: _jsx(Cloud, { className: "text-slate-400" }),
iconSize: 32,
orbitThickness: 1,
},
];
// --- Component ---
export const BeamCircle = ({ size = 300, orbits: customOrbits, centerIcon, }) => {
const orbitsData = useMemo(() => customOrbits || defaultOrbits, [customOrbits]);
const halfSize = size / 2;
// --- Define linear easing manually ---
const linearEase = (t) => t;
const rotationTransition = (duration) => ({
repeat: Infinity,
duration,
ease: linearEase, // ✅ Works properly now
});
// --- Center Icon ---
const CenterIcon = useMemo(() => (_jsx(motion.div, { className: "rounded-full shadow-lg bg-foreground grid place-content-center", style: { width: halfSize * 0.2, height: halfSize * 0.2 }, animate: { scale: [1, 1.1, 1] }, transition: { repeat: Infinity, duration: 2, ease: "easeInOut" }, children: centerIcon ? (centerIcon) : (_jsx(Sun, { className: "text-background", size: halfSize * 0.1 })) })), [halfSize, centerIcon]);
return (_jsxs("div", { className: "flex justify-center items-center p-4 bg-transparent", children: [_jsxs("div", { className: "relative", style: { width: size, height: size }, children: [orbitsData.map((orbit) => {
const orbitDiameter = size * orbit.radiusFactor;
const orbitRadius = orbitDiameter / 2;
const containerSize = size;
return (_jsxs(React.Fragment, { children: [_jsx("div", { className: `absolute rounded-full border border-dashed ${orbit.orbitColor ? "" : "border-foreground/30 dark:border-foreground/40"}`, style: {
width: orbitDiameter,
height: orbitDiameter,
top: halfSize - orbitRadius,
left: halfSize - orbitRadius,
borderColor: orbit.orbitColor || undefined,
borderWidth: orbit.orbitThickness || 1,
} }), _jsx(motion.div, { className: "absolute inset-0", style: { width: containerSize, height: containerSize }, animate: { rotate: 360 }, transition: rotationTransition(orbit.speed), children: _jsx("div", { className: "absolute", style: {
top: halfSize,
left: halfSize + orbitRadius,
transform: `translate(-50%, -50%)`,
}, children: _jsx(motion.div, { className: "rounded-full shadow-md grid place-content-center bg-foreground p-1", style: { width: orbit.iconSize, height: orbit.iconSize }, animate: { rotate: -360 }, transition: rotationTransition(orbit.speed), children: React.cloneElement(orbit.icon, {
size: orbit.iconSize * 0.6,
}) }) }) })] }, orbit.id));
}), _jsx("div", { className: "absolute inset-0 grid place-content-center z-10", children: CenterIcon })] }), _jsx("style", { jsx: true, global: true, children: `
body {
margin: 0;
}
` })] }));
};
export default BeamCircle;