Function XGrid

site/src/modules/workspaces/WorkspaceTiming/Chart/XAxis.tsx:147–176

({ columns, ...htmlProps })

};

const XGrid: FC<XGridProps> = ({ columns, ...htmlProps }) => {
	const borderDefault =
		typeof document === "undefined"
			? "hsl(var(--border-default))"
			: `hsl(${getComputedStyle(document.documentElement)
					.getPropertyValue("--border-default")
					.trim()})`;

	return (
		<div
			role="presentation"
			{...htmlProps}
			className={cn(
				"flex w-full h-full absolute top-0 left-0",
				htmlProps.className,
			)}
		>
			{[...Array(columns).keys()].map((key) => (
				<div
					key={key}
					className="flex-shrink-0 bg-repeat-y bg-right"
					style={{
						width: "var(--x-axis-width)",
						backgroundImage: `url("${dashedLine(borderDefault)}")`,
					}}
				/>
			))}
		</div>
	);
};

// A dashed line is used as a background image to create the grid.
// Using it as a background simplifies replication along the Y axis.