Square Grid Background

1import { cn } from "@/lib/utils";
2 
3type MaskPosition = "top" | "bottom" | "center" | "none";
4 
5type Background01Props = {
6  className?: string;
7  lineColor?: string;
8  gridSizeX?: number;
9  gridSizeY?: number;
10  mask?: MaskPosition;
11};
12 
13const getMaskStyle = (mask: MaskPosition): string => {
14  switch (mask) {
15    case "top":
16      return "radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)";
17    case "bottom":
18      return "radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)";
19    case "center":
20      return "radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)";
21    case "none":
22    default:
23      return "none";
24  }
25};
26 
27const Background01 = ({
28  className,
29  lineColor = "var(--border)",
30  gridSizeX = 20,
31  gridSizeY = 20,
32  mask = "none",
33}: Background01Props) => {
34  const maskStyle = getMaskStyle(mask);
35 
36  return (
37    <div className={cn("absolute inset-0 z-0 h-full w-full", className)}>
38      <div
39        className="absolute inset-0 h-full w-full pointer-events-none"
40        style={{
41          backgroundImage: `linear-gradient(to right, ${lineColor} 1px, transparent 1px), linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`,
42          backgroundSize: `${gridSizeX}px ${gridSizeY}px`,
43          ...(mask !== "none" && {
44            maskImage: maskStyle,
45            WebkitMaskImage: maskStyle,
46          }),
47        }}
48      />
49    </div>
50  );
51};
52 
53export default Background01;