feat(rendering): component based

src/components/terminal/TerminalCanvas.tsx

@@ -0,0 +1,23 @@
+import React, { type ReactNode, useEffect, useState } from "react";
+import { TerminalCanvasContextProvider } from "~/context/TerminalCanvasContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const TerminalCanvas = (props: {
+  width: number;
+  height: number;
+  children?: Array<ReactNode> | ReactNode;
+}) => {
+  const [canvas] = useState(new TerminalRenderer(props.width, props.height));
+  const [render, setRender] = useState<Array<ReactNode>>([]);
+
+  useEffect(() => {
+    setRender(canvas.render());
+  }, [canvas, props.children]);
+
+  return (
+    <TerminalCanvasContextProvider value={canvas}>
+      {props.children}
+      {render}
+    </TerminalCanvasContextProvider>
+  );
+};

src/components/terminal/TerminalText.tsx

@@ -0,0 +1,16 @@
+import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
+
+export const TerminalText = (props: {
+  x: number;
+  y: number;
+  children: Array<string> | string;
+}) => {
+  const canvas = useTerminalCanvas();
+
+  const text = Array.isArray(props.children)
+    ? props.children.join("")
+    : props.children;
+  canvas.write(props.x, props.y, text);
+
+  return null;
+};