blob: 7f3de2ffee49d6ba46363500c12b23ffc6ff6b7a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
"use client";
import { getCanvasData } from "@/app/actions/fetchers";
import { twitterCardUtil } from "@/components/canvas/custom_nodes/twittercard";
import { textCardUtil } from "@/components/canvas/custom_nodes/textcard";
import { memo, useEffect, useState } from "react";
import { Box, TldrawImage } from "tldraw";
const ImageComponent = memo(({ id }: { id: string }) => {
const [snapshot, setSnapshot] = useState<any>();
useEffect(() => {
(async () => {
setSnapshot(await getCanvasData(id));
})();
}, []);
if (snapshot && snapshot.bounds) {
const pageBounds = new Box(
snapshot.bounds.x,
snapshot.bounds.y,
snapshot.bounds.w,
snapshot.bounds.h,
);
return (
<TldrawImage
shapeUtils={[twitterCardUtil, textCardUtil]}
snapshot={snapshot.snapshot}
// background={false}
darkMode={true}
bounds={pageBounds}
padding={0}
scale={1}
format="svg"
/>
);
}
return (
<div className="w-full aspect-video bg-[#2C3439] flex justify-center items-center">
Draw things. They will appear here.
</div>
);
});
export default ImageComponent;
|