simple-fs-server/islands/ContentRenderer.tsx

import { extname } from "path/posix.ts";
import MarkdownRenderer from "./MarkdownRenderer.tsx";
import { useEffect, useState } from "preact/hooks";

const TypeToExt = {
  "image": new Set([".png", ".jpg", ".jpeg", ".gif", ".svg"]),
  "video": new Set([".mp4", ".webm", ".ogg"]),
  "audio": new Set([".mp3", ".wav", ".flac"]),
  "md": new Set([".md"]),
  "text": new Set([".txt"]),
  "code": new Set([".json", ".js", ".ts", ".css", ".tsx", ".jsx"]),
};

function extToType(ext: string) {
  for (const [type, exts] of Object.entries(TypeToExt)) {
    if (exts.has(ext)) {
      return type;
    }
  }
  return "unknown";
}

function FetchAndRender(props: { src: string; type: string }) {
  const src = props.src;
  const ext = extname(src);
  const [content, setContent] = useState("");
  useEffect(() => {
    fetch(src).then((res) => res.text()).then(setContent);
  }, [src]);
  switch (props.type) {
    case "text":
      return <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>;
    case "md":
      return <MarkdownRenderer text={content} />;
    case "code":
      return (
        <pre
          style={{ whiteSpace: "pre-wrap" }}
        ><code lang={ext.slice(1)}>{content}</code></pre>
      );
    //case "csv":
    //    return <CsvRenderer content={content} />;
    default:
      return <>error: invalid type: {props.type} content: {content}</>;
  }
}

export function RenderView(props: { src: string }) {
  const src = props.src;
  const type = extToType(extname(src));
  switch (type) {
    case "text":
    case "md":
    case "code":
      return <FetchAndRender src={src} type={type}></FetchAndRender>;
    //case "csv":
    //    return <CsvRenderer content={content} />;
    case "image":
      return <img style={{ width: "100%" }} src={src} />;
    case "video":
      return <video style={{ width: "100%" }} controls src={src} />;
    case "audio":
      return <audio style={{ width: "100%" }} controls src={src} />;
    default:
      return <>error: invalid type: {type} src: {src}</>;
  }
}

export default RenderView;