Prefer using Records over of keyed arrays

src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx

@@ -9,7 +9,7 @@ export const highlighter = (code: string): ReactElement[] => {
 	const lines = normalizedCode.split('\n').slice(0, -1);
 
 	return lines.map((line, index) => {
-		const renderer = lineRenderers.find((r) => r.test(line));
+		const renderer = Object.values(lineRenderers).find((r) => r.test(line));
 
 		if (renderer) {
 			return renderer.render(line, index);

src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx

@@ -1,17 +1,27 @@
-import React from 'react';
-
-import { LineRenderer, RendererType } from './types';
+import React, { ReactElement } from 'react';
 
 import styles from './highlighter.module.css';
 
-export const lineRenderers: LineRenderer[] = [
-	{
-		type: RendererType.EmptyLines,
+enum RendererType {
+	EmptyLines,
+	FunctionDefinitions,
+	Comments,
+	Variables,
+	Conditionals,
+	EchoStatements,
+}
+
+type LineRenderer = {
+	test: (line: string) => boolean;
+	render: (line: string, index: number) => ReactElement;
+};
+
+export const lineRenderers: Record<RendererType, LineRenderer> = {
+	[RendererType.EmptyLines]: {
 		test: (line) => line.trim() === '',
 		render: (_, i) => <div key={i}>&nbsp;</div>,
 	},
-	{
-		type: RendererType.FunctionDefinitions,
+	[RendererType.FunctionDefinitions]: {
 		test: (line) => /^function\s+[a-zA-Z_:]+/.test(line),
 		render: (line, i) => {
 			const [, name, rest] = line.match(/^function\s+([a-zA-Z_:]+)(.*)/) || [];
@@ -24,17 +34,15 @@ export const lineRenderers: LineRenderer[] = [
 			);
 		},
 	},
-	{
-		type: RendererType.Comments,
+	[RendererType.Comments]: {
 		test: (line) => line.trim().startsWith('#'),
 		render: (line, i) => (
 			<div key={i} className={styles['text-gray']}>
 				{line}
 			</div>
 		),
 	},
-	{
-		type: RendererType.Variables,
+	[RendererType.Variables]: {
 		test: (line) => /^[A-Z_]+=.*/.test(line),
 		render: (line, i) => {
 			const [varName, ...rest] = line.split('=');
@@ -47,17 +55,15 @@ export const lineRenderers: LineRenderer[] = [
 			);
 		},
 	},
-	{
-		type: RendererType.Conditionals,
+	[RendererType.Conditionals]: {
 		test: (line) => /^\s*if\s+|^\s*then\s+|^\s*else\s+|^\s*fi\s*/.test(line),
 		render: (line, i) => (
 			<div key={i} className={styles['text-pink']}>
 				{line}
 			</div>
 		),
 	},
-	{
-		type: RendererType.EchoStatements,
+	[RendererType.EchoStatements]: {
 		test: (line) => line.includes('echo'),
 		render: (line, i) => {
 			const parts = line.split('echo');
@@ -70,4 +76,4 @@ export const lineRenderers: LineRenderer[] = [
 			);
 		},
 	},
-];
+};