Grid Pattern

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { SVGAttributes } from "svelte/elements";
4 
5	interface GridPatternProps extends SVGAttributes<SVGSVGElement> {
6		width?: number;
7		height?: number;
8		/**
9		 * The x-offset of the pattern
10		 */
11		x?: number;
12		/**
13		 * The y-offset of the pattern
14		 */
15		y?: number;
16		/**
17		 * Array of [x, y] coordinates for highlighted squares
18		 */
19		squares?: Array<[x: number, y: number]>;
20		/**
21		 * Stroke dash array for dashed lines
22		 */
23		strokeDashArray?: string;
24		class?: string;
25	}
26 
27	let {
28		width = 40,
29		height = 40,
30		x = -1,
31		y = -1,
32		strokeDashArray = "0",
33		squares,
34		class: className,
35		...props
36	}: GridPatternProps = $props();
37 
38	const id = $props.id();
39</script>
40 
41<svg
42	aria-hidden="true"
43	class={cn(
44		"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
45		className
46	)}
47	{...props}
48>
49	<defs>
50		<pattern {id} {width} {height} patternUnits="userSpaceOnUse" {x} {y}>
51			<path d={`M.5 ${height}V.5H${width}`} fill="none" stroke-dasharray={strokeDashArray} />
52		</pattern>
53	</defs>
54	<rect width="100%" height="100%" stroke-width={0} fill={`url(#${id})`} />
55	{#if squares}
56		<svg {x} {y} class="overflow-visible">
57			{#each squares as [squareX, squareY], i (`${squareX}-${squareY}-${i}`)}
58				<rect
59					stroke-width="0"
60					width={width - 1}
61					height={height - 1}
62					x={squareX * width + 1}
63					y={squareY * height + 1}
64				/>
65			{/each}
66		</svg>
67	{/if}
68</svg>