Vertical Lines Background

1import { cn } from "@/lib/utils";
2 
3type MaskPosition = "top" | "bottom" | "center" | "none";
4 
5type Background04Props = {
6  className?: string;
7  lineCount?: number;
8  lineWidth?: number;
9  lineColor?: string;
10  gap?: number;
11  mask?: MaskPosition;
12};
13 
14const getMaskStyle = (mask: MaskPosition): string => {
15  switch (mask) {
16    case "top":
17      return "radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)";
18    case "bottom":
19      return "radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)";
20    case "center":
21      return "radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)";
22    case "none":
23    default:
24      return "none";
25  }
26};
27 
28const Background04 = ({
29  className,
30  lineCount = 12,
31  lineWidth = 1,
32  lineColor = "var(--border)",
33  gap = 0,
34  mask = "none",
35}: Background04Props) => {
36  const maskStyle = getMaskStyle(mask);
37 
38  return (
39    <div
40      className={cn(
41        "pointer-events-none absolute inset-0 z-0 overflow-hidden",
42        className
43      )}
44      style={
45        mask !== "none"
46          ? {
47              maskImage: maskStyle,
48              WebkitMaskImage: maskStyle,
49            }
50          : undefined
51      }
52    >
53      <div
54        className="flex size-full items-stretch justify-between"
55        style={{ padding: gap ? `0 ${gap}px` : undefined }}
56      >
57        {Array.from({ length: lineCount }).map((_, i) => (
58          <div
59            key={i}
60            style={{
61              width: `${lineWidth}px`,
62              backgroundColor: lineColor,
63            }}
64          />
65        ))}
66      </div>
67    </div>
68  );
69};
70 
71export default Background04;