MVP

src/app/[file]/content.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+import Error   from './types/error';
+import Image   from './types/image';
+import Text    from './types/text';
+
+export default function Content({ src }: { src: string}) {
+	const [content, set_content] = useState();
+
+	type ContentType<T> = {
+		matcher: RegExp,
+		emit: () => undefined | Processor<T>,
+	};
+	type Processor<T> = {
+		process:     (response: Response) => Promise<T>,
+		postprocess: (data: T) => undefined,
+	};
+
+	const recognized_types: ContentType<Any>[] = [{
+		matcher: /image\/\w+/,
+		emit: () => {
+			set_content(<Image src={src} />);
+		},
+	}, {
+		matcher: /text\/\w+/,
+		emit: () => {
+			return {
+				process: (response: Response) => {
+					return response.text();
+				},
+				postprocess: (data: string) => {
+					set_content(<Text text={data} />);
+				}
+			};
+		}
+	}];
+
+	useEffect(() => {
+		if (content == undefined) {
+			const result = fetch(src)
+				.then(response => {
+					const content_type = response.headers.get('Content-Type').split(';')[0];
+					for (let type of recognized_types) {
+						if (type.matcher.test(content_type)) {
+							const emitted = type.emit();
+							if (emitted != undefined) {
+								result.then(emitted.postprocess);
+								return emitted.process(response);
+							}
+							return;
+						}
+					}
+					set_content(<Error content_type={content_type} />);
+				});
+		}
+	}, []);
+
+	return content ?? <p>Loading...</p>;
+}