74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import './App.css'
|
|
import {createSignal} from "solid-js";
|
|
import {getmisskeycolors} from "./helpers.ts";
|
|
|
|
function App() {
|
|
const [count, setCount] = createSignal(2);
|
|
const [message, setMessage] = createSignal("not valid colors");
|
|
|
|
|
|
return (
|
|
<>
|
|
<div class="App relative flex min-h-screen flex-col justify-center overflow-hidden ">
|
|
<div class="mb-10">
|
|
<div class="flex items-center space-x-2 mb-2">
|
|
<span class="text-pink-500">number of colors: </span>
|
|
<input
|
|
type="number"
|
|
class="border border-gray-300 rounded p-2"
|
|
value={count()}
|
|
onInput={(e) => setCount(Number(e.target.value))}
|
|
min="2"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-pink-500">text: </span>
|
|
<input
|
|
type="text"
|
|
class="border border-gray-300 rounded p-2"
|
|
id="ubuntucola"
|
|
onInput={(e) => setCount(Number(e.target.value))}
|
|
min="2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
{Array.from({length: count()}, (_, i) => (
|
|
<div
|
|
// @ts-ignore
|
|
key={i}
|
|
class="m-2"
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-pink-500">color:</span>
|
|
<input
|
|
type="color"
|
|
id={`color_${i}`}
|
|
class="border border-gray-300 rounded p-2"
|
|
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div>
|
|
<button class="border-pink-300" onclick={()=>{
|
|
let colors = []
|
|
for (let i = 0; i < count(); i++) {
|
|
// @ts-ignore
|
|
colors.push(document.getElementById(`color_${i}`).value);
|
|
}
|
|
// @ts-ignore
|
|
let message = document.getElementById("ubuntucola").value as string
|
|
setMessage(getmisskeycolors(message, colors));
|
|
}}>
|
|
generate!
|
|
</button>
|
|
</div>
|
|
<span>{message()}</span>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|