refactor: move styles into separate components

1 files changed, 26 insertions, 0 deletions

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
new file mode 100644
index 0000000..026b062
--- /dev/null
+++ b/src/components/TextInput.tsx
@@ -0,0 +1,26 @@
+import { useCallback } from 'preact/hooks';
+import type { Signal } from '@preact/signals';
+import './TextInput.css';
+
+export interface TextInputProps {
+	signal?: Signal<string>;
+	props: Record<string, any>;
+}
+
+const TextInput = ({ signal, ...props }: TextInputProps) => {
+	const onInputSignal = useCallback((event: InputEvent) => {
+		signal.value = event.target.value;
+	}, [signal]);
+
+	return (
+		<input
+			type="text"
+			{...props}
+			class={(props.class || '') + ' __TextInput'}
+			value={signal || props.value}
+			onInput={signal ? onInputSignal : props.onInput}
+		/>
+	);
+};
+
+export default TextInput;
\ No newline at end of file