From 495e95249a61443f72f9f50820767684c0e99446 Mon Sep 17 00:00:00 2001
From: Marton Horvath <17813215+horvathmarton@users.noreply.github.com>
Date: Thu, 19 Oct 2023 22:13:54 +0200
Subject: [PATCH] feat: move sizable hack into a separate wrapper

---
 components/mermaid.tsx | 19 ++++---------------
 components/sizable.tsx | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 components/sizable.tsx

diff --git a/components/mermaid.tsx b/components/mermaid.tsx
index 0cd0dfa..55df4e9 100644
--- a/components/mermaid.tsx
+++ b/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>
   );
 }
diff --git a/components/sizable.tsx b/components/sizable.tsx
new file mode 100644
index 0000000..069f1de
--- /dev/null
+++ b/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>
+  );
+}