feat: move sizable hack into a separate wrapper

components/mermaid.tsx

@@ -1,6 +1,7 @@
 "use client";
-import React, { useEffect, useState } from "react";
 import mermaid from "mermaid";
+import { useEffect } from "react";
+import Sizable from "./sizable";
 
 export default function Mermaid({
   chart,
@@ -19,20 +20,8 @@ export default function Mermaid({
   }, []);
 
   return (
-    <div
-      className="mermaid my-8"
-      style={
-        width
-          ? {
-              width: "" + width + "vw",
-              position: "relative",
-              left: "50%",
-              marginLeft: "-" + width / 2 + "vw",
-            }
-          : {}
-      }
-    >
+    <Sizable className="mermaid my-8" width={width}>
       {chart}
-    </div>
+    </Sizable>
   );
 }

components/sizable.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+export interface SizableProps {
+  width: number;
+  className: string;
+  children: string | JSX.Element;
+}
+
+export default function Sizable({ width, children, className }: SizableProps) {
+  return (
+    <div
+      className={className}
+      style={{
+        width: "" + width + "vw",
+        position: "relative",
+        left: "50%",
+        marginLeft: "-" + width / 2 + "vw",
+      }}
+    >
+      {children}
+    </div>
+  );
+}