[fix] hydration bug in iframe (#813)

* Fixes hydration bug in iframe

* Update [id].tsx

apps/www/components/IFrameWarning.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { styled } from 'styles'
 
-export function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) {
+export default function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) {
   const [copied, setCopied] = React.useState(false)
   const rTimeout = React.useRef<any>(0)
 
@@ -93,6 +93,8 @@ const StyledContainer = styled('div', {
   fontSize: '$3',
   gap: '$5',
   flexDirection: 'column',
+  border: '1px solid $hover',
+  borderRadius: '$2',
 })
 
 const StyledUrlLink = styled('a', {

apps/www/pages/r/[id].tsx

@@ -2,7 +2,11 @@ import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import { getSession } from 'next-auth/react'
 import dynamic from 'next/dynamic'
-import { IFrameWarning } from 'components/IFrameWarning'
+
+const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+  ssr: false,
+}) as any
+
 const MultiplayerEditor = dynamic(() => import('components/MultiplayerEditor'), {
   ssr: false,
 }) as any

apps/www/pages/v/[id].tsx

@@ -3,7 +3,11 @@ import type { GetServerSideProps } from 'next'
 import { getSession } from 'next-auth/react'
 import dynamic from 'next/dynamic'
 import { Utils } from '@tldraw/core'
-import { IFrameWarning } from 'components/IFrameWarning'
+
+const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
+  ssr: false,
+}) as any
+
 const ReadOnlyMultiplayerEditor = dynamic(() => import('components/ReadOnlyMultiplayerEditor'), {
   ssr: false,
 }) as any

examples/tldraw-example/src/iframe.tsx

@@ -2,8 +2,11 @@ import * as React from 'react'
 
 export default function IFrame() {
   return (
-    <div className="tldraw">
-      <iframe src="http://localhost:3000/r/hello" style={{ width: '100%', height: '50%' }} />
+    <div className="tldraw" style={{ padding: 32 }}>
+      <iframe
+        src="http://localhost:3000/r/hello"
+        style={{ width: '100%', height: '50%', border: 'none' }}
+      />
     </div>
   )
 }