Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/abi/screenshot-to-code

Browse Source
This commit is contained in:
Abi Raja 2023-11-21 10:59:00 -05:00
commit e95b50d13f
3 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -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",

27
frontend/src/App.tsx
View File

@ -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 (
<div className="mt-2">
{IS_RUNNING_ON_CLOUD && <PicoBadge />}
@ -243,10 +251,19 @@ function App() {
<Preview code={generatedCode} device="mobile" />
</TabsContent>
<TabsContent value="code">
<CodeMirror
code={generatedCode}
editorTheme={settings.editorTheme}
/>
<div className="relative">
<CodeMirror
code={generatedCode}
editorTheme={settings.editorTheme}
/>
<span
title="Copy Code"
className="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5 absolute top-[20px] right-[20px]"
onClick={doCopyCode}
>
<FaCopy />
</span>
</div>
</TabsContent>
</Tabs>
</div>

12
frontend/yarn.lock
View File

@ -1258,6 +1258,13 @@ convert-source-map@^2.0.0:
resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
copy-to-clipboard@^3.3.3:
version "3.3.3"
resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
dependencies:
toggle-selection "^1.0.6"
crelt@^1.0.5:
version "1.0.6"
resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
@ -2420,6 +2427,11 @@ to-regex-range@^5.0.1:
dependencies:
is-number "^7.0.0"
toggle-selection@^1.0.6:
version "1.0.6"
resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
ts-api-utils@^1.0.1:
version "1.0.3"
resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz"