mike
37 lines
995 B
TypeScript
37 lines
995 B
TypeScript
"use client";
|
|
import Keyboard from "react-simple-keyboard";
|
|
import "react-simple-keyboard/build/css/index.css";
|
|
import dynamic from "next/dynamic";
|
|
import { useRef, useState } from "react";
|
|
|
|
export default function Teclado() {
|
|
const keyboardUser = useRef<any>(null);
|
|
const [layout, setLayout] = useState("default");
|
|
const [input, setInput] = useState("");
|
|
|
|
const onChangeUser = (input: string) => {
|
|
setInput(input);
|
|
console.log("Input cambiado:", input);
|
|
};
|
|
|
|
const onKeyPress = (button: string) => {
|
|
if (button === "{shift}" || button === "{lock}") {
|
|
setLayout((prev) => (prev === "default" ? "shift" : "default"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mt-3 w-100">
|
|
<Keyboard
|
|
keyboardRef={(r) => (keyboardUser.current = r)}
|
|
layoutName={layout}
|
|
onChange={onChangeUser}
|
|
onKeyPress={onKeyPress}
|
|
/>
|
|
|
|
<div className="mt-3 text-center">
|
|
<strong>Texto actual:</strong> {input}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |