rc-1

frontend/source/components/inputs/Text.tsx

@@ -0,0 +1,31 @@
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
+import InputLabel from './Label'
+import './styles/Label.css'
+import './styles/Text.css'
+
+export interface HandleForInputText {
+    getValue(): string
+}
+
+interface PropsForInputTags {
+    label: string
+    placeholder: string
+}
+
+const InputText = forwardRef<HandleForInputText, PropsForInputTags>(({ label, placeholder }, ref) => {
+    const componentID = useId()
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => ({
+        getValue: () => inputRef.current?.value ?? '',
+    }))
+
+    return (
+        <>
+            {label && <InputLabel for={componentID} label={label} />}
+            <input id={componentID} ref={inputRef} type="text" className="input-text" placeholder={placeholder} />
+        </>
+    )
+})
+
+export default InputText