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

support desktop and mobile preview

Browse Source
This commit is contained in:
Abi Raja 2023-11-16 11:56:54 -05:00
parent e11b9c929b
commit 67f710521d
3 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/App.tsx
View File

@ -5,7 +5,13 @@ import Preview from "./components/Preview";
import { CodeGenerationParams, generateCode } from "./generateCode"; import { CodeGenerationParams, generateCode } from "./generateCode";
import Spinner from "./components/Spinner"; import Spinner from "./components/Spinner";
import classNames from "classnames"; import classNames from "classnames";
import { FaCode, FaDownload, FaEye, FaUndo } from "react-icons/fa"; import {
FaCode,
FaDesktop,
FaDownload,
FaMobile,
FaUndo,
} from "react-icons/fa";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
@ -83,7 +89,7 @@ function App() {
} }
return ( return (
<div className="mt-6"> <div className="mt-2">
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col"> <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
<div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6"> <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
<h1 className="text-2xl mt-10">Screenshot to Code</h1> <h1 className="text-2xl mt-10">Screenshot to Code</h1>
@ -181,11 +187,14 @@ function App() {
{(appState === "CODING" || appState === "CODE_READY") && ( {(appState === "CODING" || appState === "CODE_READY") && (
<div className="ml-4"> <div className="ml-4">
<Tabs defaultValue="preview"> <Tabs defaultValue="desktop">
<div className="flex justify-end mr-8"> <div className="flex justify-end mr-8 mb-4">
<TabsList> <TabsList>
<TabsTrigger value="preview" className="flex gap-x-2"> <TabsTrigger value="desktop" className="flex gap-x-2">
<FaEye /> Preview <FaDesktop /> Desktop
</TabsTrigger>
<TabsTrigger value="mobile" className="flex gap-x-2">
<FaMobile /> Mobile
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="code" className="flex gap-x-2"> <TabsTrigger value="code" className="flex gap-x-2">
<FaCode /> <FaCode />
@ -193,8 +202,11 @@ function App() {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div> </div>
<TabsContent value="preview"> <TabsContent value="desktop">
<Preview code={generatedCode} /> <Preview code={generatedCode} device="desktop" />
</TabsContent>
<TabsContent value="mobile">
<Preview code={generatedCode} device="mobile" />
</TabsContent> </TabsContent>
<TabsContent value="code"> <TabsContent value="code">
<CodeMirror code={generatedCode} /> <CodeMirror code={generatedCode} />

2
frontend/src/components/CodeMirror.tsx
View File

@ -60,6 +60,6 @@ function CodeMirror({ code }: Props) {
} }
}, [code]); }, [code]);
return <div className="overflow-x-scroll overflow-y-scroll" ref={ref} />; return <div className="overflow-x-scroll overflow-y-scroll mx-2" ref={ref} />;
} }
export default CodeMirror; export default CodeMirror;

16
frontend/src/components/Preview.tsx
View File

@ -1,19 +1,27 @@
import classNames from "classnames";
import useThrottle from "../hooks/useThrottle"; import useThrottle from "../hooks/useThrottle";
interface Props { interface Props {
code: string; code: string;
device: "mobile" | "desktop";
} }
function Preview({ code }: Props) { function Preview({ code, device }: Props) {
const throttledCode = useThrottle(code, 200); const throttledCode = useThrottle(code, 200);
return ( return (
<div className="w-[704px]"> <div className="flex justify-center mx-2">
<iframe <iframe
title="Preview" title="Preview"
srcDoc={throttledCode} srcDoc={throttledCode}
className="border-[4px] border-black rounded-[20px] shadow-lg className={classNames(
transform scale-[0.8] origin-top-left w-[1280px] h-[832px]" "border-[4px] border-black rounded-[20px] shadow-lg",
"transform scale-[0.9] origin-top",
{
"w-full h-[832px]": device === "desktop",
"w-[400px] h-[832px]": device === "mobile",
}
)}
></iframe> ></iframe>
</div> </div>
); );