Always enable syntax highlighting, minor refactor

- Extract styles into module.css
- Remove obsolete types

src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import { ReactElement, useState } from 'react';
+import { ReactElement } from 'react';
 import { taskfile } from '@/components/Generator/GeneredTaskfile/taskfile';
 import { useFormContext } from 'react-hook-form';
 import { GeneratorSettings } from '@/components/Generator/Generator';
 import CopyToClipboard from '@/components/Generator/GeneredTaskfile/Copy';
 import { highlighter } from './Highlighter';
 
 const GeneratedTaskfile = (): ReactElement => {
-	const [showHighlighting, setShowHighlighting] = useState(true);
-
 	const form = useFormContext<GeneratorSettings>();
 
 	const settings = form.watch();
@@ -19,9 +17,7 @@ const GeneratedTaskfile = (): ReactElement => {
 	return (
 		<>
 			<CopyToClipboard onCopy={() => navigator.clipboard.writeText(resultTaskfile)} />
-			<pre onClick={() => setShowHighlighting(!showHighlighting)}>
-				{showHighlighting ? highlighter(resultTaskfile) : resultTaskfile}
-			</pre>
+			<pre>{highlighter(resultTaskfile)}</pre>
 		</>
 	);
 };

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 
-import { styles } from './styles';
+import styles from './highlighter.module.css';
+
 import { lineRenderers } from './lineRenderers';
 
 export const highlighter = (code: string): ReactElement[] => {
@@ -15,7 +16,7 @@ export const highlighter = (code: string): ReactElement[] => {
 		}
 
 		return (
-			<div key={index} style={styles.colors.white}>
+			<div key={index} className={styles['text-white']}>
 				{line}
 			</div>
 		);

src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css

@@ -0,0 +1,35 @@
+.line {
+	display: flex;
+}
+
+.text-white {
+	color: #fff;
+}
+
+.text-gray {
+	color: #888589;
+}
+
+.text-yellow {
+	color: #fde047;
+}
+
+.text-yellow-light {
+	color: #fef08a;
+}
+
+.text-pink {
+	color: #ec4899;
+}
+
+.text-purple {
+	color: #a855f7;
+}
+
+.text-blue {
+	color: #60a5fa;
+}
+
+.text-blue-light {
+	color: #93c5fd;
+}

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { LineRenderer, RendererType } from './types';
-import { styles } from './styles';
+
+import styles from './highlighter.module.css';
 
 export const lineRenderers: LineRenderer[] = [
 	{
@@ -15,10 +16,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const [, name, rest] = line.match(/^function\s+([a-zA-Z_:]+)(.*)/) || [];
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.purple}>function </span>
-					<span style={styles.colors.yellow}>{name}</span>
-					<span style={styles.colors.white}>{rest}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-purple']}>function </span>
+					<span className={styles['text-yellow']}>{name}</span>
+					<span className={styles['text-white']}>{rest}</span>
 				</div>
 			);
 		},
@@ -27,7 +28,7 @@ export const lineRenderers: LineRenderer[] = [
 		type: RendererType.Comments,
 		test: (line) => line.trim().startsWith('#'),
 		render: (line, i) => (
-			<div key={i} style={styles.colors.gray}>
+			<div key={i} className={styles['text-gray']}>
 				{line}
 			</div>
 		),
@@ -38,10 +39,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const [varName, ...rest] = line.split('=');
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.blue}>{varName}</span>
-					<span style={styles.colors.white}>=</span>
-					<span style={styles.colors.lightYellow}>{rest.join('=')}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-blue']}>{varName}</span>
+					<span className={styles['text-white']}>=</span>
+					<span className={styles['text-yellow-light']}>{rest.join('=')}</span>
 				</div>
 			);
 		},
@@ -50,7 +51,7 @@ export const lineRenderers: LineRenderer[] = [
 		type: RendererType.Conditionals,
 		test: (line) => /^\s*if\s+|^\s*then\s+|^\s*else\s+|^\s*fi\s*/.test(line),
 		render: (line, i) => (
-			<div key={i} style={styles.colors.pink}>
+			<div key={i} className={styles['text-pink']}>
 				{line}
 			</div>
 		),
@@ -61,10 +62,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const parts = line.split('echo');
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.white}>{parts[0]}</span>
-					<span style={styles.colors.lightBlue}>echo</span>
-					<span style={styles.colors.lightYellow}>{parts[1]}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-white']}>{parts[0]}</span>
+					<span className={styles['text-blue-light']}>echo</span>
+					<span className={styles['text-yellow-light']}>{parts[1]}</span>
 				</div>
 			);
 		},

src/components/Generator/GeneredTaskfile/Highlighter/types.ts

@@ -1,12 +1,5 @@
 import { ReactElement } from 'react';
 
-type ColorName = 'white' | 'purple' | 'yellow' | 'green' | 'blue' | 'pink' | 'lightYellow' | 'lightBlue' | 'gray';
-
-export type StylesConfig = {
-	line: { display: string };
-	colors: Record<ColorName, { color: string }>;
-};
-
 export enum RendererType {
 	EmptyLines,
 	FunctionDefinitions,