From fdecb93ea659b2bc40d397feab29b2fc9c82275d Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 14 Nov 2023 15:48:18 -0500
Subject: [PATCH] aider: Add a button to download the code as index.html in
 frontend/src/components/Preview.tsx.

# Aider chat conversation:

USER: add previ

ASSISTANT:
^C KeyboardInterrupt

USER: add `frontend/src/components/Preview.tsx`

ASSISTANT: Sure, I can help with that. Could you please provide more details about the changes you want to make in `frontend/src/components/Preview.tsx`?

USER: add a button to download the code as index.html

ASSISTANT: To add a download button, we need to modify the `frontend/src/components/Preview.tsx` file. We will add a new button that, when clicked, will trigger a download of the generated code as an `index.html` file.

Here is the step-by-step plan:

1. Import the `useState` hook from React.
2. Create a new state variable `blobUrl` and a function `createBlobUrl` to update it.
3. In the `createBlobUrl` function, create a new Blob from the `code` prop, create a URL for the Blob, and set `blobUrl` to this URL.
4. Add a new button that triggers the `createBlobUrl` function when clicked.
5. Set the `href` attribute of the button to `blobUrl` and the `download` attribute to `index.html`.

Here is the *edit block* for these changes:

```jsx
frontend/src/components/Preview.tsx
<<<<<<< HEAD
interface Props {
  code: string;
}

function Preview({ code }: Props) {
  return (
    <div className="w-[704px]">
      <iframe
        title="Iframe Example"
        srcDoc={code}
        className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
        transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
      ></iframe>
    </div>
  );
}
export default Preview;
=======
import { useState } from 'react';

interface Props {
  code: string;
}

function Preview({ code }: Props) {
  const [blobUrl, setBlobUrl] = useState('');

  const createBlobUrl = () => {
    const blob = new Blob([code], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    setBlobUrl(url);
  };

  return (
    <div className="w-[704px]">
      <iframe
        title="Iframe Example"
        srcDoc={code}
        className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
        transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
      ></iframe>
      <button onClick={createBlobUrl} href={blobUrl} download="index.html">
        Download code
      </button>
    </div>
  );
}
export default Preview;
>>>>>>> updated
```
---
 frontend/src/components/Preview.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index c8508b1..ff22513 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,8 +1,18 @@
+import { useState } from 'react';
+
 interface Props {
   code: string;
 }
 
 function Preview({ code }: Props) {
+  const [blobUrl, setBlobUrl] = useState('');
+
+  const createBlobUrl = () => {
+    const blob = new Blob([code], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    setBlobUrl(url);
+  };
+
   return (
     <div className="w-[704px]">
       <iframe
@@ -11,6 +21,9 @@ function Preview({ code }: Props) {
         className="border-[5px] border-black rounded-[33px] p-4 shadow-lg 
         transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
       ></iframe>
+      <button onClick={createBlobUrl} href={blobUrl} download="index.html">
+        Download code
+      </button>
     </div>
   );
 }