diff --git a/frontend/package.json b/frontend/package.json index 7a34ab2..912d0b7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "classnames": "^2.3.2", "clsx": "^2.0.0", "codemirror": "^6.0.1", + "copy-to-clipboard": "^3.3.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c2ec3fe..2b962e6 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useCallback } from "react"; import ImageUpload from "./components/ImageUpload"; import CodePreview from "./components/CodePreview"; import Preview from "./components/Preview"; @@ -7,11 +7,13 @@ import Spinner from "./components/Spinner"; import classNames from "classnames"; import { FaCode, + FaCopy, FaDesktop, FaDownload, FaMobile, FaUndo, } from "react-icons/fa"; +import copy from "copy-to-clipboard"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; @@ -24,6 +26,7 @@ import { OnboardingNote } from "./components/OnboardingNote"; import { usePersistedState } from "./hooks/usePersistedState"; import { UrlInputSection } from "./components/UrlInputSection"; import TermsOfServiceDialog from "./components/TermsOfServiceDialog"; +import toast from "react-hot-toast"; function App() { const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">( @@ -111,6 +114,11 @@ function App() { setUpdateInstruction(""); } + const doCopyCode = useCallback(() => { + copy(generatedCode); + toast.success("Copied to clipboard"); + }, [generatedCode]); + return (