background-boxes

1"use client";
2import React from "react";
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
7  const rows = new Array(150).fill(1);
8  const cols = new Array(100).fill(1);
9  let colors = [
10    "#93c5fd",
11    "#f9a8d4",
12    "#86efac",
13    "#fde047",
14    "#fca5a5",
15    "#d8b4fe",
16    "#93c5fd",
17    "#a5b4fc",
18    "#c4b5fd",
19  ];
20  const getRandomColor = () => {
21    return colors[Math.floor(Math.random() * colors.length)];
22  };
23 
24  return (
25    <div
26      style={{
27        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
28      }}
29      className={cn(
30        "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
31        className,
32      )}
33      {...rest}
34    >
35      {rows.map((_, i) => (
36        <motion.div
37          key={`row` + i}
38          className="relative h-8 w-16 border-l border-slate-700"
39        >
40          {cols.map((_, j) => (
41            <motion.div
42              whileHover={{
43                backgroundColor: `${getRandomColor()}`,
44                transition: { duration: 0 },
45              }}
46              animate={{
47                transition: { duration: 2 },
48              }}
49              key={`col` + j}
50              className="relative h-8 w-16 border-t border-r border-slate-700"
51            >
52              {j % 2 === 0 && i % 2 === 0 ? (
53                <svg
54                  xmlns="http://www.w3.org/2000/svg"
55                  fill="none"
56                  viewBox="0 0 24 24"
57                  strokeWidth="1.5"
58                  stroke="currentColor"
59                  className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
60                >
61                  <path
62                    strokeLinecap="round"
63                    strokeLinejoin="round"
64                    d="M12 6v12m6-6H6"
65                  />
66                </svg>
67              ) : null}
68            </motion.div>
69          ))}
70        </motion.div>
71      ))}
72    </div>
73  );
74};
75 
76export const Boxes = React.memo(BoxesCore);