import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [color1, setColor1] = useState("#000000");
const [color2, setColor2] = useState("#000000");
const [message, setMessage] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch("/set-color", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ color1, color2 }),
});
const data = await response.json();
setMessage(data.message);
};
useEffect(() => {
const fetchColors = async () => {
const response = await fetch("/get-color");
const data = await response.json();
setColor1(data.color1);
setColor2(data.color2);
};
fetchColors();
}, []);
return (
<div style={{ textAlign: "center", padding: "20px" }}>
<h1>Main Colours</h1>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: color1,
margin: "20px auto",
}}
/>
<div
style={{
width: "100px",
height: "100px",
backgroundColor: color2,
margin: "20px auto",
}}
/>
<form onSubmit={handleSubmit}>
<div>
<label>Color 1:</label>
<input
type="color"
value={color1}
onChange={(e) => setColor1(e.target.value)}
/>
</div>
<div>
<label>Color 2:</label>
<input
type="color"
value={color2}
onChange={(e) => setColor2(e.target.value)}
/>
</div>
<button type="submit">Set Colors</button>
</form>
{message && <p>{message}</p>}
<p>
<a href={import.meta.url.replace("esm.town", "val.town")}>
View Source
</a>
</p>
</div>
);
}
function client() {
createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") {
client();
}
async function server(request: Request): Promise<Response> {
const { blob } = await import("https://esm.town/v/std/blob");
const allowedOrigins = [
"https://amymagistris.com",
"https://www.amymagistris.com",
"https://magistris-colorrequestsender.web.val.run",
"https://framer.com",