92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
import { URL } from "utils";
|
|
|
|
export default function PresetCreator({
|
|
conv,
|
|
name,
|
|
setName,
|
|
fg,
|
|
setFg,
|
|
bg,
|
|
setBg,
|
|
font,
|
|
setFont,
|
|
onsubmit,
|
|
}: {
|
|
conv: string;
|
|
|
|
name: string;
|
|
setName: (_: string) => void;
|
|
|
|
fg: string;
|
|
setFg: (_: string) => void;
|
|
|
|
bg: string;
|
|
setBg: (_: string) => void;
|
|
|
|
font: string;
|
|
setFont: (_: string) => void;
|
|
|
|
onsubmit?: () => void;
|
|
}) {
|
|
async function submit() {
|
|
await fetch(`${URL}/api/conv/${conv}`, {
|
|
method: "PUT",
|
|
body: JSON.stringify({ register_preset: name, fg, bg, font }),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="preset-creator"
|
|
style={{
|
|
color: fg,
|
|
backgroundColor: bg == "" ? "white" : bg,
|
|
fontFamily: font,
|
|
}}
|
|
>
|
|
<div className="pc-name">
|
|
Name:{" "}
|
|
<input
|
|
value={name}
|
|
onInput={(e: any) => setName(e.target.value)}
|
|
className="pc-input"
|
|
></input>
|
|
</div>
|
|
<div className="pc-fg">
|
|
FG:{" "}
|
|
<input
|
|
value={fg}
|
|
onInput={(e: any) => setFg(e.target.value)}
|
|
className="pc-input"
|
|
></input>
|
|
</div>
|
|
<div className="pc-bg">
|
|
BG:{" "}
|
|
<input
|
|
value={bg}
|
|
onInput={(e: any) => setBg(e.target.value)}
|
|
className="pc-input"
|
|
></input>
|
|
</div>
|
|
<div className="pc-font">
|
|
Font:{" "}
|
|
<input
|
|
value={font}
|
|
onInput={(e: any) => setFont(e.target.value)}
|
|
className="pc-input"
|
|
></input>
|
|
</div>
|
|
<button
|
|
className="pc-submit"
|
|
onClick={async () => {
|
|
await submit();
|
|
onsubmit && onsubmit();
|
|
}}
|
|
>
|
|
submit
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|