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.
86 lines • 5.6 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DotBackground = exports.GridBackground = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const utils_1 = require("@/components/lib/utils");
const GridBackground = ({ className, children, gridSize = 20, gridColor = "#e4e4e7", darkGridColor = "#262626", showFade = true, fadeIntensity = 20, ...props }) => {
const [currentGridColor, setCurrentGridColor] = (0, react_1.useState)(gridColor);
(0, react_1.useEffect)(() => {
const prefersDarkMode = window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
const isDarkModeActive = document.documentElement.classList.contains("dark") || prefersDarkMode;
setCurrentGridColor(isDarkModeActive ? darkGridColor : gridColor);
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "class") {
const updatedIsDarkModeActive = document.documentElement.classList.contains("dark");
setCurrentGridColor(updatedIsDarkModeActive ? darkGridColor : gridColor);
}
});
});
observer.observe(document.documentElement, { attributes: true });
return function () {
return observer.disconnect();
};
}, [gridColor, darkGridColor]);
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex h-[50rem] w-full items-center justify-center bg-transparent", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", style: {
backgroundSize: gridSize + "px " + gridSize + "px", // String concatenation
backgroundImage: "linear-gradient(to right, " +
currentGridColor +
" 1px, transparent 1px), " +
"linear-gradient(to bottom, " +
currentGridColor +
" 1px, transparent 1px)", // String concatenation
} }), showFade && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-white dark:bg-black", style: {
maskImage: "radial-gradient(ellipse at center, transparent " +
fadeIntensity +
"%, black)", // String concatenation
WebkitMaskImage: "radial-gradient(ellipse at center, transparent " +
fadeIntensity +
"%, black)", // String concatenation
} })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-20", children: children })] }));
};
exports.GridBackground = GridBackground;
const DotBackground = ({ className, children, dotSize = 1, dotColor = "#000", darkDotColor = "#fff", spacing = 20, showFade = true, fadeIntensity = 20, ...props }) => {
const [currentDotColor, setCurrentDotColor] = (0, react_1.useState)(dotColor);
(0, react_1.useEffect)(() => {
const prefersDarkMode = window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
const isDarkModeActive = document.documentElement.classList.contains("dark") || prefersDarkMode;
setCurrentDotColor(isDarkModeActive ? darkDotColor : dotColor);
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "class") {
const updatedIsDarkModeActive = document.documentElement.classList.contains("dark");
setCurrentDotColor(updatedIsDarkModeActive ? darkDotColor : dotColor);
}
});
});
observer.observe(document.documentElement, { attributes: true });
return function () {
return observer.disconnect();
};
}, [dotColor, darkDotColor]);
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative flex h-[50rem] w-full items-center justify-center bg-white dark:bg-black", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", style: {
backgroundSize: spacing + "px " + spacing + "px", // String concatenation
backgroundImage: "radial-gradient(" +
currentDotColor +
" " +
dotSize +
"px, transparent " +
dotSize +
"px)", // String concatenation
} }), showFade && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-white dark:bg-black", style: {
maskImage: "radial-gradient(ellipse at center, transparent " +
fadeIntensity +
"%, black)", // String concatenation
WebkitMaskImage: "radial-gradient(ellipse at center, transparent " +
fadeIntensity +
"%, black)", // String concatenation
} })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-20", children: children })] }));
};
exports.DotBackground = DotBackground;
exports.default = { GridBackground: exports.GridBackground, DotBackground: exports.DotBackground };
//# sourceMappingURL=grid-dot-backgrounds.js.map