1/** @jsxImportSource https://esm.sh/react */
2import Stripe from "npm:stripe@14.8.0";
3
1/** @jsxImportSource https://esm.sh/react */
2import { micromark } from "https://esm.sh/micromark@3";
3import { email } from "https://esm.town/v/std/email?v=11";
4import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
5import { html } from "https://esm.town/v/stevekrouse/html";
6import { renderToString } from "npm:react-dom/server";
7import Stripe from "npm:stripe";
8
1/** @jsxImportSource https://esm.sh/react */
2import { micromark } from "https://esm.sh/micromark@3";
3import { email } from "https://esm.town/v/std/email?v=11";
4import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
5import { html } from "https://esm.town/v/stevekrouse/html";
6import { renderToString } from "npm:react-dom/server";
7import Stripe from "npm:stripe";
8
1/** @jsxImportSource https://esm.sh/react */
2import { micromark } from "https://esm.sh/micromark@3";
3import { email } from "https://esm.town/v/std/email?v=11";
4import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
5import { html } from "https://esm.town/v/stevekrouse/html";
6import { renderToString } from "npm:react-dom/server";
7import Stripe from "npm:stripe";
8
1/** @jsxImportSource https://esm.sh/react */
2import { micromark } from "https://esm.sh/micromark@3";
3import { email } from "https://esm.town/v/std/email?v=11";
4import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
5import { html } from "https://esm.town/v/stevekrouse/html";
6import { renderToString } from "npm:react-dom/server";
7import Stripe from "npm:stripe";
8
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState, useCallback } from "https://esm.sh/react@18.2.0";
4import ReactMarkdown from "https://esm.sh/react-markdown@8.0.7?deps=react@18.2.0";
5
6function MarkdownPreview({ content }) {
7 return (
8 <div className="preview">
9 <ReactMarkdown>{content}</ReactMarkdown>
10 </div>
11 );
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/c156eb0e-8b9d-4104-a055-502e9a0eb441/cerebras_coder_prompts";
7
31}: {
32 prompt: string;
33 setPrompt: React.Dispatch<React.SetStateAction<string>>;
34 handleSubmit: (e: React.FormEvent) => void;
35 handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119 const previewRef = React.useRef<HTMLDivElement>(null);
120 const [prompt, setPrompt] = useState("");
121 const [projectId, setProjectId] = useState<number | null>(null);
175 }
176
177 async function handleSubmit(e: React.FormEvent | string) {
178 if (typeof e !== "string") {
179 e.preventDefault();
674 </div>
675 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676 <React.Fragment key={iframeKey}>
677 <iframe
678 srcDoc={code}
680 className="w-full grow"
681 />
682 </React.Fragment>
683 </div>
684 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6 import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7
19}: {
20 prompt: string;
21 setPrompt: React.Dispatch<React.SetStateAction<string>>;
22 handleSubmit: (e: React.FormEvent) => void;
23 handleStarterPromptClick: (promptItem: PromptItem) => void;
24}) {
122
123function App() {
124 const previewRef = React.useRef<HTMLDivElement>(null);
125 const [prompt, setPrompt] = useState("");
126 const [projectId, setProjectId] = useState<number | null>(null);
179 }
180
181 async function handleSubmit(e: React.FormEvent | string) {
182 if (typeof e !== "string") {
183 e.preventDefault();
696 </div>
697 <div className="w-full h-full flex flex-col grow rounded-xl border-2 border-white">
698 <React.Fragment key={iframeKey}>
699 <iframe
700 srcDoc={code}
702 className="w-full h-full grow"
703 />
704 </React.Fragment>
705 </div>
706 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import Chart from "https://esm.sh/chart.js/auto";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
6import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";
7import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
8
9const STARTER_PROMPTS = [
141 });
142
143 async function handleSubmit(e: React.FormEvent) {
144 e.preventDefault();
145 setLoading(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import Chart from "https://esm.sh/chart.js/auto";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";
6import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";
7import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
8
9const STARTER_PROMPTS = [
141 });
142
143 async function handleSubmit(e: React.FormEvent) {
144 e.preventDefault();
145 setLoading(true);