| 1 | "use client"; |
| 2 | import { cn } from "@/lib/utils"; |
| 3 | import { motion } from "motion/react"; |
| 4 | import React from "react"; |
| 5 | |
| 6 | export const BoxesCore = ({ className, ...rest }: { className?: string }) => { |
| 7 | const rows = new Array(150).fill(1); |
| 8 | const cols = new Array(100).fill(1); |
| 9 | const colors = [ |
| 10 | "--sky-300", |
| 11 | "--pink-300", |
| 12 | "--green-300", |
| 13 | "--yellow-300", |
| 14 | "--red-300", |
| 15 | "--purple-300", |
| 16 | "--blue-300", |
| 17 | "--indigo-300", |
| 18 | "--violet-300", |
| 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: `var(${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 | |
| 76 | export const Boxes = React.memo(BoxesCore); |
| 77 |