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.
112 lines • 6.01 kB
JavaScript
;
"use client";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const framer_motion_1 = require("framer-motion");
const lucide_react_1 = require("lucide-react");
// --- Default Orbits ---
const defaultOrbits = [
{
id: 1,
radiusFactor: 0.15,
speed: 7,
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { className: "text-sky-500" }),
iconSize: 24,
orbitThickness: 1.5,
},
{
id: 3,
radiusFactor: 0.55,
speed: 9,
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Briefcase, { className: "text-green-500" }),
iconSize: 28,
orbitColor: "rgba(76, 175, 80, 0.4)",
orbitThickness: 2,
},
{
id: 4,
radiusFactor: 0.75,
speed: 15,
icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cloud, { className: "text-slate-400" }),
iconSize: 32,
orbitThickness: 1,
},
];
// --- Component ---
const BeamCircle = ({ size = 300, orbits: customOrbits, centerIcon, }) => {
const orbitsData = (0, react_1.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 = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(framer_motion_1.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) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Sun, { className: "text-background", size: halfSize * 0.1 })) })), [halfSize, centerIcon]);
return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center p-4 bg-transparent", children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.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,
} }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute inset-0", style: { width: containerSize, height: containerSize }, animate: { rotate: 360 }, transition: rotationTransition(orbit.speed), children: (0, jsx_runtime_1.jsx)("div", { className: "absolute", style: {
top: halfSize,
left: halfSize + orbitRadius,
transform: `translate(-50%, -50%)`,
}, children: (0, jsx_runtime_1.jsx)(framer_motion_1.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_1.default.cloneElement(orbit.icon, {
size: orbit.iconSize * 0.6,
}) }) }) })] }, orbit.id));
}), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 grid place-content-center z-10", children: CenterIcon })] }) }));
};
exports.default = BeamCircle;
//# sourceMappingURL=beam-circle.js.map