@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
97 lines (96 loc) • 4.32 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }) {
const id = (0, __WEBPACK_EXTERNAL_MODULE_react__.useId)();
const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
const [dimensions, setDimensions] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
width: 0,
height: 0
});
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
const updateDimensions = ()=>{
if (containerRef.current) {
const { width, height } = containerRef.current.getBoundingClientRect();
setDimensions({
width,
height
});
}
};
updateDimensions();
window.addEventListener("resize", updateDimensions);
return ()=>window.removeEventListener("resize", updateDimensions);
}, []);
const dots = Array.from({
length: Math.ceil(dimensions.width / width) * Math.ceil(dimensions.height / height)
}, (_, i)=>{
const col = i % Math.ceil(dimensions.width / width);
const row = Math.floor(i / Math.ceil(dimensions.width / width));
return {
x: col * width + cx,
y: row * height + cy,
delay: 5 * Math.random(),
duration: 3 * Math.random() + 2
};
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
ref: containerRef,
"aria-hidden": "true",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("pointer-events-none absolute inset-0 h-full w-full", className),
...props,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("defs", {
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("radialGradient", {
id: `${id}-gradient`,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("stop", {
offset: "0%",
stopColor: "currentColor",
stopOpacity: "1"
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("stop", {
offset: "100%",
stopColor: "currentColor",
stopOpacity: "0"
})
]
})
}),
dots.map((dot, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.circle, {
cx: dot.x,
cy: dot.y,
r: cr,
fill: glow ? `url(#${id}-gradient)` : "currentColor",
className: "text-neutral-400/80",
initial: glow ? {
opacity: 0.4,
scale: 1
} : {},
animate: glow ? {
opacity: [
0.4,
1,
0.4
],
scale: [
1,
1.5,
1
]
} : {},
transition: glow ? {
duration: dot.duration,
repeat: 1 / 0,
repeatType: "reverse",
delay: dot.delay,
ease: "easeInOut"
} : {}
}, `${dot.x}-${dot.y}`))
]
});
}
export { DotBackground };
//# sourceMappingURL=dot-background.js.map