xlibs-components/dist/components/aceternity/boxes.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { motion } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const BoxesCore = ({ className, ...rest }) => {
    const rows = new Array(150).fill(1);
    const cols = new Array(100).fill(1);
    let colors = [
        "#93c5fd",
        "#f9a8d4",
        "#86efac",
        "#fde047",
        "#fca5a5",
        "#d8b4fe",
        "#93c5fd",
        "#a5b4fc",
        "#c4b5fd",
    ];
    const getRandomColor = () => {
        return colors[Math.floor(Math.random() * colors.length)];
    };
    return (_jsx("div", { style: {
            transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
        }, className: cn("absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4", className), ...rest, children: rows.map((_, i) => (_jsx(motion.div, { className: "relative h-8 w-16 border-l border-slate-700", children: cols.map((_, j) => (_jsx(motion.div, { whileHover: {
                    backgroundColor: `${getRandomColor()}`,
                    transition: { duration: 0 },
                }, animate: {
                    transition: { duration: 2 },
                }, className: "relative h-8 w-16 border-t border-r border-slate-700", children: j % 2 === 0 && i % 2 === 0 ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 6v12m6-6H6" }) })) : null }, `col` + j))) }, `row` + i))) }));
};
export const Boxes = React.memo(BoxesCore);