72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
|
import { cn } from "@/lib/utils";
|
||
|
|
import { useId } from "react";
|
||
|
|
|
||
|
|
interface GridPatternProps {
|
||
|
|
width?: any;
|
||
|
|
height?: any;
|
||
|
|
x?: any;
|
||
|
|
y?: any;
|
||
|
|
squares?: Array<[x: number, y: number]>;
|
||
|
|
strokeDasharray?: any;
|
||
|
|
className?: string;
|
||
|
|
[key: string]: any;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function GridPattern({
|
||
|
|
width = 40,
|
||
|
|
height = 40,
|
||
|
|
x = -1,
|
||
|
|
y = -1,
|
||
|
|
strokeDasharray = 0,
|
||
|
|
squares,
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: GridPatternProps) {
|
||
|
|
const id = useId();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
aria-hidden="true"
|
||
|
|
className={cn(
|
||
|
|
"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/35 stroke-gray-400/35",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<pattern
|
||
|
|
id={id}
|
||
|
|
width={width}
|
||
|
|
height={height}
|
||
|
|
patternUnits="userSpaceOnUse"
|
||
|
|
x={x}
|
||
|
|
y={y}
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d={`M.5 ${height}V.5H${width}`}
|
||
|
|
fill="none"
|
||
|
|
strokeDasharray={strokeDasharray}
|
||
|
|
/>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
|
||
|
|
{squares && (
|
||
|
|
<svg x={x} y={y} className="overflow-visible">
|
||
|
|
{squares.map(([x, y]) => (
|
||
|
|
<rect
|
||
|
|
strokeWidth="0"
|
||
|
|
key={`${x}-${y}`}
|
||
|
|
width={width - 1}
|
||
|
|
height={height - 1}
|
||
|
|
x={x * width + 1}
|
||
|
|
y={y * height + 1}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GridPattern;
|