Add png component

Author: pomber

apps/web/app/landing/download.tsx

@@ -0,0 +1,20 @@
+"use client"
+import * as htmlToImage from "html-to-image"
+
+export function Download({ selector }: { selector: string }) {
+  const onClick = async () => {
+    const nodes = document.querySelectorAll(selector) as any
+    for (const node of nodes) {
+      const dataUrl = await htmlToImage.toPng(node as HTMLElement)
+      var img = new Image()
+      img.src = dataUrl
+      document.getElementById("out")!.appendChild(img)
+    }
+  }
+  return (
+    <div>
+      <button onClick={onClick}>As PNG</button>
+      <div id="out" className="min-w-6 min-h-6 border"></div>
+    </div>
+  )
+}

apps/web/package.json

@@ -26,6 +26,7 @@
     "diff": "^5.1.0",
     "dotenv": "^16.4.1",
     "estree-util-to-js": "^2.0.0",
+    "html-to-image": "^1.11.11",
     "lucide-react": "^0.303.0",
     "next": "14.1.0",
     "next-docs-mdx": "7.1.2",