Make fetch colours less repetitive

Pretty sure this actually increases LoC but hey, I need something point at to show I know react

src/Body.tsx

@@ -8,6 +8,34 @@ import LinkedIn from "./assets/linkedin.svg?react";
 import Mastodon from "./assets/mastodon.svg?react";
 import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react";
 
+type ColouredBlockProps = {
+	colorNum: number;
+};
+
+const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
+	<span style={{ color: `var(--color${colorNum})` }}>███</span>
+);
+
+type ColouredLineProps = {
+	light: boolean;
+};
+
+const ColouredLine = ({ light }: ColouredLineProps) => {
+	const startIndex = light ? 8 : 0;
+	return (
+		<p className="blocks">
+			{Array.from({ length: 8 }).map(
+				(
+					_value,
+					index, // Apparently this is the best way to map a range in JavaScript
+				) => (
+					<ColouredBlock colorNum={startIndex + index} key={index} />
+				),
+			)}
+		</p>
+	);
+};
+
 // TODO: Automate screenshot of info for thumbnail?
 const Fetch = () => {
 	return (
@@ -55,26 +83,8 @@ const Fetch = () => {
 					<p>
 						<br />
 					</p>
-					<p className="blocks">
-						<span style={{ color: "var(--color0)" }}>███</span>
-						<span style={{ color: "var(--color1)" }}>███</span>
-						<span style={{ color: "var(--color2)" }}>███</span>
-						<span style={{ color: "var(--color3)" }}>███</span>
-						<span style={{ color: "var(--color4)" }}>███</span>
-						<span style={{ color: "var(--color5)" }}>███</span>
-						<span style={{ color: "var(--color6)" }}>███</span>
-						<span style={{ color: "var(--color7)" }}>███</span>
-					</p>
-					<p className="blocks">
-						<span style={{ color: "var(--color8)" }}>███</span>
-						<span style={{ color: "var(--color9)" }}>███</span>
-						<span style={{ color: "var(--color10)" }}>███</span>
-						<span style={{ color: "var(--color11)" }}>███</span>
-						<span style={{ color: "var(--color12)" }}>███</span>
-						<span style={{ color: "var(--color13)" }}>███</span>
-						<span style={{ color: "var(--color14)" }}>███</span>
-						<span style={{ color: "var(--color15)" }}>███</span>
-					</p>
+					<ColouredLine light={false} />
+					<ColouredLine light={true} />
 				</div>
 			</div>
 		</div>

src/style.css

@@ -300,6 +300,13 @@ p {
 	}
 }
 
+/* Helper for capturing thumb.png*/
+@media print {
+	.invisible-div {
+		padding: 1rem;
+	}
+}
+
 #basic-info {
 	display: flex;
 	flex-direction: column;