set in storage current html after clicking login button

src/components/App.tsx

@@ -3,7 +3,13 @@ import { useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import classNames from "classnames";
 import { editor } from "monaco-editor";
-import { useMount, useUnmount, useEvent, createBreakpoint } from "react-use";
+import {
+  useMount,
+  useUnmount,
+  useEvent,
+  createBreakpoint,
+  useLocalStorage,
+} from "react-use";
 import { toast } from "react-toastify";
 
 import Header from "./header/header";
@@ -21,6 +27,8 @@ const useBreakpoint = createBreakpoint({
 
 function App() {
   const breakpoint = useBreakpoint();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [htmlStorage, _, removeHtmlStorage] = useLocalStorage("html_content");
 
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
@@ -29,7 +37,7 @@ function App() {
 
   const [isResizing, setIsResizing] = useState(false);
   const [error, setError] = useState(false);
-  const [html, setHtml] = useState(defaultHTML);
+  const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
   const [auth, setAuth] = useState<Auth | undefined>(undefined);
 
@@ -72,6 +80,10 @@ function App() {
 
   useMount(() => {
     fetchMe();
+    if (htmlStorage) {
+      removeHtmlStorage();
+      toast.warn("Previous HTML content restored from local storage.");
+    }
     if (!editor.current || !preview.current) return;
 
     if (breakpoint === "lg") {

src/components/ask-ai/ask-ai.tsx

@@ -137,7 +137,7 @@ function AskAI({
           }
         )}
       >
-        <Login>
+        <Login html={html}>
           <p className="text-gray-500 text-sm mb-3">
             You reached the limit of free AI usage. Please login to continue.
           </p>

src/components/deploy-button/deploy-button.tsx

@@ -101,7 +101,7 @@ function DeployButton({
         )}
       >
         {!auth ? (
-          <Login />
+          <Login html={html} />
         ) : (
           <>
             <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">

src/components/login/login.tsx

@@ -1,4 +1,23 @@
-function Login({ children }: { children?: React.ReactNode }) {
+import { useLocalStorage } from "react-use";
+import { defaultHTML } from "../../utils/consts";
+
+function Login({
+  html,
+  children,
+}: {
+  html?: string;
+  children?: React.ReactNode;
+}) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setStorage] = useLocalStorage("html_content");
+
+  const handleClick = () => {
+    if (html !== defaultHTML) {
+      setStorage(html);
+    }
+    console.log("store current HTML in local storage");
+  };
+
   return (
     <>
       <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
@@ -9,7 +28,7 @@ function Login({ children }: { children?: React.ReactNode }) {
       </header>
       <main className="px-4 py-4 space-y-3">
         {children}
-        <a href="/api/login">
+        <a href="/api/login" onClick={handleClick}>
           <img
             src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
             alt="Sign in with Hugging Face"