Refactor

src/app/components/Card.tsx

@@ -6,7 +6,11 @@ export type CardProps = {
 	items: string[];
 };
 
-export const Card: React.FC<CardProps> = ({ title, description, items }) => {
+export function Card({
+	title,
+	description,
+	items,
+}: CardProps): React.JSX.Element {
 	return (
 		<div className="card bg-base-200 shadow-sm mb-6">
 			<div className="card-body">
@@ -22,4 +26,4 @@ export const Card: React.FC<CardProps> = ({ title, description, items }) => {
 			</div>
 		</div>
 	);
-};
+}

src/app/components/Form.tsx

@@ -1,8 +1,8 @@
 import type React from "react";
 import { useRef, useState } from "react";
-import { AsciiPreview } from "../components/AsciiPreview";
 import type { AsciiConfig } from "../lib/data";
 import { useAsciiConverter } from "../lib/useAsciiConverter";
+import { AsciiPreview } from "./AsciiPreview";
 
 export function Form(): React.JSX.Element {
 	const [preserveColors, setPreserveColors] = useState(false);

src/app/lib/useAsciiConverter.ts

@@ -8,17 +8,17 @@ import {
 	loadImage,
 } from "./utils";
 
-export const useAsciiConverter = (config: AsciiConfig = DEFAULT_CONFIG) => {
+export function useAsciiConverter(config: AsciiConfig = DEFAULT_CONFIG) {
 	const [result, setResult] = useState<string>("");
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 
-	const createAsciiArt = (
+	function createAsciiArt(
 		imageData: ImageData,
 		width: number,
 		height: number,
 		preserveColors: boolean,
-	): string => {
+	): string {
 		let ascii = "";
 
 		// Calculate step sizes for better performance
@@ -46,17 +46,21 @@ export const useAsciiConverter = (config: AsciiConfig = DEFAULT_CONFIG) => {
 		}
 
 		return ascii;
-	};
+	}
 
-	const sampleArea = (
+	function sampleArea(
 		imageData: ImageData,
 		startX: number,
 		startY: number,
 		widthStep: number,
 		heightStep: number,
 		totalWidth: number,
 		totalHeight: number,
-	) => {
+	): {
+		r: number;
+		g: number;
+		b: number;
+	} {
 		let totalR = 0;
 		let totalG = 0;
 		let totalB = 0;
@@ -77,9 +81,9 @@ export const useAsciiConverter = (config: AsciiConfig = DEFAULT_CONFIG) => {
 			g: totalG / sampleCount,
 			b: totalB / sampleCount,
 		};
-	};
+	}
 
-	const convertImageToAscii = async (file: File): Promise<void> => {
+	async function convertImageToAscii(file: File): Promise<void> {
 		setLoading(true);
 		setError(null);
 
@@ -108,7 +112,7 @@ export const useAsciiConverter = (config: AsciiConfig = DEFAULT_CONFIG) => {
 		} finally {
 			setLoading(false);
 		}
-	};
+	}
 
 	return {
 		result,
@@ -117,4 +121,4 @@ export const useAsciiConverter = (config: AsciiConfig = DEFAULT_CONFIG) => {
 		convertImageToAscii,
 		clearResult: () => setResult(""),
 	};
-};
+}