1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4
5const Button = ({
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4
5const CarCard = ({ car }) => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { Link } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4
5const Footer = () => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import { Link, useLocation } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4
5const Navbar = () => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect } from 'https://esm.sh/react@18.2.0';
3import { BrowserRouter, Routes, Route } from 'https://esm.sh/react-router-dom@6.10.0?deps=react@18.2.0';
4
5// Pages
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
4import App from './App.jsx';
5
6const root = createRoot(document.getElementById('root'));
7root.render(
8 <React.StrictMode>
9 <App />
10 </React.StrictMode>
11);
125 </div>
126 <div class="bg-white p-6 rounded-lg shadow-md text-center">
127 <i class="fab fa-react text-4xl text-blue-400 mb-4"></i>
128 <h3 class="text-xl font-semibold">React</h3>
129 </div>
130 <div class="bg-white p-6 rounded-lg shadow-md text-center">
162 <p class="text-gray-600 mb-4">A fully responsive e-commerce platform with product catalog, shopping cart, and payment integration.</p>
163 <div class="flex flex-wrap gap-2 mb-4">
164 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">React</span>
165 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Node.js</span>
166 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">MongoDB</span>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import {
4 BrowserRouter as Router,
9 useNavigate,
10 useParams,
11} from "https://esm.sh/react-router-dom@6.11.2?deps=react@18.2.0";
12import React, { createContext, useContext, useEffect, useState } from "https://esm.sh/react@18.2.0";
13
14// --- Sync ID Management ---
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
