split code tab into separate component and clean up code
This commit is contained in:
Abi Raja
parent
10322253f3
commit
2eb98587b2
@ -1,4 +1,4 @@
|
||||
import { useRef, useState, useCallback } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import ImageUpload from "./components/ImageUpload";
|
||||
import CodePreview from "./components/CodePreview";
|
||||
import Preview from "./components/Preview";
|
||||
@ -7,7 +7,6 @@ import Spinner from "./components/Spinner";
|
||||
import classNames from "classnames";
|
||||
import {
|
||||
FaCode,
|
||||
FaCopy,
|
||||
FaDesktop,
|
||||
FaDownload,
|
||||
FaMobile,
|
||||
@ -15,12 +14,9 @@ import {
|
||||
} from "react-icons/fa";
|
||||
|
||||
import { Switch } from "./components/ui/switch";
|
||||
import copy from "copy-to-clipboard";
|
||||
import toast from "react-hot-toast";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
|
||||
import CodeMirror from "./components/CodeMirror";
|
||||
import SettingsDialog from "./components/SettingsDialog";
|
||||
import { Settings, EditorTheme, AppState } from "./types";
|
||||
import { IS_RUNNING_ON_CLOUD } from "./config";
|
||||
@ -31,6 +27,7 @@ import { UrlInputSection } from "./components/UrlInputSection";
|
||||
import TermsOfServiceDialog from "./components/TermsOfServiceDialog";
|
||||
import html2canvas from "html2canvas";
|
||||
import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants";
|
||||
import CodeTab from "./components/CodeTab";
|
||||
|
||||
function App() {
|
||||
const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
|
||||
@ -97,49 +94,6 @@ function App() {
|
||||
setAppState(AppState.CODE_READY);
|
||||
};
|
||||
|
||||
function doOpenInCodepenio() {
|
||||
const code = generatedCode;
|
||||
|
||||
const form = document.createElement("form");
|
||||
form.setAttribute("method", "POST");
|
||||
form.setAttribute("action", "https://codepen.io/pen/define");
|
||||
form.setAttribute("target", "_blank"); // open in new window
|
||||
|
||||
const data = {
|
||||
html: code,
|
||||
editors: "100", // 1:Open html, 0:close CSS, 0:Close Js
|
||||
layout: "left",
|
||||
css_external:
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
|
||||
(generatedCode.includes("<ion-")
|
||||
? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
|
||||
: ""),
|
||||
js_external:
|
||||
"https://cdn.tailwindcss.com " +
|
||||
(generatedCode.includes("<ion-")
|
||||
? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
|
||||
: ""),
|
||||
};
|
||||
// test have html to json
|
||||
try {
|
||||
JSON.stringify(data);
|
||||
} catch (error) {
|
||||
data.html = "<!-- Copy your code here -->";
|
||||
}
|
||||
// Crear un input tipo hidden
|
||||
const input = document.createElement("input");
|
||||
input.setAttribute("type", "hidden");
|
||||
input.setAttribute("name", "data");
|
||||
input.setAttribute("value", JSON.stringify(data));
|
||||
|
||||
// Agregar el input al formulario
|
||||
form.appendChild(input);
|
||||
|
||||
// Agregar el formulario al documento y enviarlo automáticamente
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function doGenerateCode(params: CodeGenerationParams) {
|
||||
setExecutionConsole([]);
|
||||
setAppState(AppState.CODING);
|
||||
@ -192,11 +146,6 @@ function App() {
|
||||
setUpdateInstruction("");
|
||||
}
|
||||
|
||||
const doCopyCode = useCallback(() => {
|
||||
copy(generatedCode);
|
||||
toast.success("Copied to clipboard");
|
||||
}, [generatedCode]);
|
||||
|
||||
const handleTermDialogOpenChange = (open: boolean) => {
|
||||
setSettings((s) => ({
|
||||
...s,
|
||||
@ -356,33 +305,11 @@ function App() {
|
||||
<Preview code={generatedCode} device="mobile" />
|
||||
</TabsContent>
|
||||
<TabsContent value="code">
|
||||
<div className="relative">
|
||||
<div className="flex justify-start items-center px-4 mb-2">
|
||||
<span
|
||||
title="Copy Code"
|
||||
className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
|
||||
onClick={doCopyCode}
|
||||
>
|
||||
Copy Code <FaCopy className="ml-2" />
|
||||
</span>
|
||||
<Button
|
||||
onClick={doOpenInCodepenio}
|
||||
className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
|
||||
>
|
||||
Open in{" "}
|
||||
<img
|
||||
src="https://assets.codepen.io/t-1/codepen-logo.svg"
|
||||
alt="codepen.io"
|
||||
className="h-4 ml-1"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<CodeMirror
|
||||
code={generatedCode}
|
||||
editorTheme={settings.editorTheme}
|
||||
onCodeChange={setGeneratedCode}
|
||||
/>
|
||||
</div>
|
||||
<CodeTab
|
||||
code={generatedCode}
|
||||
setCode={setGeneratedCode}
|
||||
settings={settings}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
87
frontend/src/components/CodeTab.tsx
Normal file
87
frontend/src/components/CodeTab.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { FaCopy } from "react-icons/fa";
|
||||
import CodeMirror from "./CodeMirror";
|
||||
import { Button } from "./ui/button";
|
||||
import { Settings } from "../types";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useCallback } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
interface Props {
|
||||
code: string;
|
||||
setCode: React.Dispatch<React.SetStateAction<string>>;
|
||||
settings: Settings;
|
||||
}
|
||||
|
||||
function CodeTab({ code, setCode, settings }: Props) {
|
||||
const copyCode = useCallback(() => {
|
||||
copy(code);
|
||||
toast.success("Copied to clipboard");
|
||||
}, [code]);
|
||||
|
||||
const doOpenInCodepenio = useCallback(async () => {
|
||||
// TODO: Update CSS and JS external links depending on the framework being used
|
||||
const data = {
|
||||
html: code,
|
||||
editors: "100", // 1: Open HTML, 0: Close CSS, 0: Close JS
|
||||
layout: "left",
|
||||
css_external:
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" +
|
||||
(code.includes("<ion-")
|
||||
? ",https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
|
||||
: ""),
|
||||
js_external:
|
||||
"https://cdn.tailwindcss.com " +
|
||||
(code.includes("<ion-")
|
||||
? ",https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js,https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
|
||||
: ""),
|
||||
};
|
||||
|
||||
// Create a hidden form and submit it to open the code in CodePen
|
||||
// Can't use fetch API directly because we want to open the URL in a new tab
|
||||
const input = document.createElement("input");
|
||||
input.setAttribute("type", "hidden");
|
||||
input.setAttribute("name", "data");
|
||||
input.setAttribute("value", JSON.stringify(data));
|
||||
|
||||
const form = document.createElement("form");
|
||||
form.setAttribute("method", "POST");
|
||||
form.setAttribute("action", "https://codepen.io/pen/define");
|
||||
form.setAttribute("target", "_blank");
|
||||
form.appendChild(input);
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}, [code]);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="flex justify-start items-center px-4 mb-2">
|
||||
<span
|
||||
title="Copy Code"
|
||||
className="bg-black text-white flex items-center justify-center hover:text-black hover:bg-gray-100 cursor-pointer rounded-lg text-sm p-2.5"
|
||||
onClick={copyCode}
|
||||
>
|
||||
Copy Code <FaCopy className="ml-2" />
|
||||
</span>
|
||||
<Button
|
||||
onClick={doOpenInCodepenio}
|
||||
className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
|
||||
>
|
||||
Open in{" "}
|
||||
<img
|
||||
src="https://assets.codepen.io/t-1/codepen-logo.svg"
|
||||
alt="codepen.io"
|
||||
className="h-4 ml-1"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<CodeMirror
|
||||
code={code}
|
||||
editorTheme={settings.editorTheme}
|
||||
onCodeChange={setCode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CodeTab;
|
||||
Loading…
Reference in New Issue
Block a user