diff --git a/frontend/index.html b/frontend/index.html index 892650c..0d85bb4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,6 +8,15 @@ href="https://picoapps.xyz/favicon.png" /> + + + + + + Screenshot to Code diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 12dbc8c..7058bac 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,6 +3,7 @@ import ImageUpload from "./components/ImageUpload"; import CodePreview from "./components/CodePreview"; import Preview from "./components/Preview"; import { generateCode } from "./generateCode"; +import Spinner from "./components/Spinner"; function App() { const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">( @@ -37,8 +38,11 @@ function App() { } return ( -
-

Drag & Drop a Screenshot

+
+

Screenshot to Code

+

+ drag & drop a screenshot below +

{appState === "INITIAL" && ( <> @@ -54,12 +58,12 @@ function App() { src={referenceImages[0]} alt="Reference" /> -
+

Console

{console.map((line, index) => (
{line}
@@ -67,7 +71,15 @@ function App() {
{/* Show code preview only when coding */} - {appState === "CODING" && } + {appState === "CODING" && ( + <> +
+ + Generating... +
+ + + )} {appState === "CODE_READY" && ( Download code diff --git a/frontend/src/components/CodePreview.tsx b/frontend/src/components/CodePreview.tsx index 3fb40d1..4f89ca9 100644 --- a/frontend/src/components/CodePreview.tsx +++ b/frontend/src/components/CodePreview.tsx @@ -17,7 +17,7 @@ function CodePreview({ code }: Props) {
{code}
diff --git a/frontend/src/components/ImageUpload.tsx b/frontend/src/components/ImageUpload.tsx index 8eed819..e0dd0ec 100644 --- a/frontend/src/components/ImageUpload.tsx +++ b/frontend/src/components/ImageUpload.tsx @@ -5,9 +5,13 @@ import { toast } from "react-hot-toast"; const baseStyle = { flex: 1, + width: "50%", + margin: "0 auto", + minHeight: "400px", display: "flex", flexDirection: "column", alignItems: "center", + justifyContent: "center", padding: "20px", borderWidth: 2, borderRadius: 2, @@ -104,7 +108,7 @@ function ImageUpload({ setReferenceImages }: Props) { {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-

Drag and drop a screenshot or mock up here, or click to select

+

Drop a screenshot here, or click to select

); diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx new file mode 100644 index 0000000..ae63d2b --- /dev/null +++ b/frontend/src/components/Spinner.tsx @@ -0,0 +1,25 @@ +function Spinner() { + return ( +
+ + Loading... +
+ ); +} + +export default Spinner; diff --git a/frontend/src/index.css b/frontend/src/index.css index b5c61c9..f347111 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +body { + @apply bg-gray-200; +} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e947187..2ad466f 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -3,6 +3,9 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { + fontFamily: { + sans: ["Poppins", "Helvetica", "sans-serif"], + }, colors: { button: "#ffd803", highlight: "#ffd803",