Render the website inside an iframe to preview the changes being applied

app/[slug]/dashboard/website/page.tsx

@@ -3,16 +3,23 @@
 'use client'
 
 import { AbstractApi } from '@/app/api/abstract-api';
+import { getSlug } from '@/app/lib/utils';
 import { Website, WebsiteSerializer } from '@/app/lib/website';
 import { useEffect, useState } from 'react';
 import Tiptap from '../../../components/Tiptap';
 
+
 export default function Page() {
 
   const [website, setWebsite] = useState<Website>()
   const api = new AbstractApi<Website>();
   const serializer = new WebsiteSerializer();
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const [iframeKey, setIframeKey] = useState<number>(Math.random());
+
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -29,18 +36,30 @@ export default function Page() {
 
     setTimeoutId(
       setTimeout(() => {
-        api.update(serializer, new Website('', newContent), () => { });
+        api.update(serializer, new Website('', newContent), () => {
+          setIframeKey(Math.random()); // Change key to force iframe reload
+        });
       }, 500)
     );
   }
 
   return (
-    <div className="border rounded-lg p-4">
+    <div className="flex">
+      <div className="w-1/2 border rounded-lg p-4">
         <Tiptap
           key={website?.content ?? 'empty'}
           content={website?.content || ''}
           onUpdate={updateWebsite}
         />
       </div>
+      <div className="w-1/2 border rounded-lg p-4 ml-4">
+        <iframe
+          key={iframeKey}
+          src={`/${slug}/site`}
+          title="Website Preview"
+          className="w-full h-[80vh] rounded"
+        />
+      </div>
+    </div>
   );
 }