|
1 | | -import Image from 'next/image' |
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { Editor } from "@monaco-editor/react"; |
| 4 | +import { useState } from "react"; |
2 | 5 |
|
3 | 6 | export default function Home() { |
| 7 | + const [code, setCode] = useState(""); |
| 8 | + const [language, setLanguage] = useState("bash"); |
| 9 | + const [output, setOutput] = useState("Output:"); |
4 | 10 | return ( |
5 | 11 | <main className="flex min-h-screen flex-col items-center justify-between p-24"> |
6 | 12 | <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex"> |
7 | | - <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30"> |
8 | | - Get started by editing |
9 | | - <code className="font-mono font-bold">app/page.tsx</code> |
10 | | - </p> |
11 | | - <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none"> |
12 | | - <a |
13 | | - className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" |
14 | | - href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" |
15 | | - target="_blank" |
16 | | - rel="noopener noreferrer" |
17 | | - > |
18 | | - By{' '} |
19 | | - <Image |
20 | | - src="/vercel.svg" |
21 | | - alt="Vercel Logo" |
22 | | - className="dark:invert" |
23 | | - width={100} |
24 | | - height={24} |
25 | | - priority |
26 | | - /> |
27 | | - </a> |
| 13 | + <div className="w-full flex flex-col gap-2"> |
| 14 | + <div className="flex"> |
| 15 | + <div className="flex w-full justify-end align-middle gap-2"> |
| 16 | + <select |
| 17 | + id="location" |
| 18 | + name="location" |
| 19 | + className="block rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6" |
| 20 | + defaultValue={language} |
| 21 | + onChange={(ev) => setLanguage(ev.target.value)} |
| 22 | + > |
| 23 | + <option value="bash">Bash</option> |
| 24 | + <option value="python3">Python</option> |
| 25 | + <option value="golang">Golang</option> |
| 26 | + </select> |
| 27 | + <button |
| 28 | + type="button" |
| 29 | + className="rounded bg-indigo-600 px-3 py-2 text-md font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 " |
| 30 | + onClick={() => { |
| 31 | + fetch("/api/execute", { |
| 32 | + method: "POST", |
| 33 | + body: JSON.stringify({ |
| 34 | + langauge: language, |
| 35 | + code: code, |
| 36 | + }), |
| 37 | + headers: { |
| 38 | + "content-type": "application/json", |
| 39 | + }, |
| 40 | + }) |
| 41 | + .then((res) => res.json()) |
| 42 | + .then((data) => { |
| 43 | + if (data.message) { |
| 44 | + setOutput(data.message); |
| 45 | + } else { |
| 46 | + setOutput(data.output); |
| 47 | + } |
| 48 | + }); |
| 49 | + }} |
| 50 | + > |
| 51 | + Run |
| 52 | + </button> |
| 53 | + </div> |
| 54 | + </div> |
| 55 | + <Editor |
| 56 | + height="25rem" |
| 57 | + language="bash" |
| 58 | + theme="vs-dark" |
| 59 | + className="max-w-5xl" |
| 60 | + value={code} |
| 61 | + onChange={(value) => setCode(value || "")} |
| 62 | + /> |
| 63 | + <div className="overflow-hidden bg-white shadow sm:rounded-lg"> |
| 64 | + <div className="px-4 py-5 sm:p-6">{output}</div> |
| 65 | + </div> |
28 | 66 | </div> |
29 | 67 | </div> |
30 | | - |
31 | | - <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]"> |
32 | | - <Image |
33 | | - className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" |
34 | | - src="/next.svg" |
35 | | - alt="Next.js Logo" |
36 | | - width={180} |
37 | | - height={37} |
38 | | - priority |
39 | | - /> |
40 | | - </div> |
41 | | - |
42 | | - <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left"> |
43 | | - <a |
44 | | - href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" |
45 | | - className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" |
46 | | - target="_blank" |
47 | | - rel="noopener noreferrer" |
48 | | - > |
49 | | - <h2 className={`mb-3 text-2xl font-semibold`}> |
50 | | - Docs{' '} |
51 | | - <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> |
52 | | - -> |
53 | | - </span> |
54 | | - </h2> |
55 | | - <p className={`m-0 max-w-[30ch] text-sm opacity-50`}> |
56 | | - Find in-depth information about Next.js features and API. |
57 | | - </p> |
58 | | - </a> |
59 | | - |
60 | | - <a |
61 | | - href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
62 | | - className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" |
63 | | - target="_blank" |
64 | | - rel="noopener noreferrer" |
65 | | - > |
66 | | - <h2 className={`mb-3 text-2xl font-semibold`}> |
67 | | - Learn{' '} |
68 | | - <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> |
69 | | - -> |
70 | | - </span> |
71 | | - </h2> |
72 | | - <p className={`m-0 max-w-[30ch] text-sm opacity-50`}> |
73 | | - Learn about Next.js in an interactive course with quizzes! |
74 | | - </p> |
75 | | - </a> |
76 | | - |
77 | | - <a |
78 | | - href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" |
79 | | - className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" |
80 | | - target="_blank" |
81 | | - rel="noopener noreferrer" |
82 | | - > |
83 | | - <h2 className={`mb-3 text-2xl font-semibold`}> |
84 | | - Templates{' '} |
85 | | - <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> |
86 | | - -> |
87 | | - </span> |
88 | | - </h2> |
89 | | - <p className={`m-0 max-w-[30ch] text-sm opacity-50`}> |
90 | | - Explore the Next.js 13 playground. |
91 | | - </p> |
92 | | - </a> |
93 | | - |
94 | | - <a |
95 | | - href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" |
96 | | - className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" |
97 | | - target="_blank" |
98 | | - rel="noopener noreferrer" |
99 | | - > |
100 | | - <h2 className={`mb-3 text-2xl font-semibold`}> |
101 | | - Deploy{' '} |
102 | | - <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none"> |
103 | | - -> |
104 | | - </span> |
105 | | - </h2> |
106 | | - <p className={`m-0 max-w-[30ch] text-sm opacity-50`}> |
107 | | - Instantly deploy your Next.js site to a shareable URL with Vercel. |
108 | | - </p> |
109 | | - </a> |
110 | | - </div> |
111 | 68 | </main> |
112 | | - ) |
| 69 | + ); |
113 | 70 | } |
0 commit comments