@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)! 😍
131 lines (130 loc) • 5.2 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
DotBackground: ()=>DotBackground
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
const react_namespaceObject = require("motion/react");
const external_react_namespaceObject = require("react");
function DotBackground({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }) {
const id = (0, external_react_namespaceObject.useId)();
const containerRef = (0, external_react_namespaceObject.useRef)(null);
const [dimensions, setDimensions] = (0, external_react_namespaceObject.useState)({
width: 0,
height: 0
});
(0, external_react_namespaceObject.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, jsx_runtime_namespaceObject.jsxs)("svg", {
ref: containerRef,
"aria-hidden": "true",
className: (0, utils_cjs_namespaceObject.cn)("pointer-events-none absolute inset-0 h-full w-full", className),
...props,
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("defs", {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("radialGradient", {
id: `${id}-gradient`,
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
offset: "0%",
stopColor: "currentColor",
stopOpacity: "1"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
offset: "100%",
stopColor: "currentColor",
stopOpacity: "0"
})
]
})
}),
dots.map((dot, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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}`))
]
});
}
exports.DotBackground = __webpack_exports__.DotBackground;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"DotBackground"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=dot-background.cjs.map