Starting guac clients

src/components/DebouncedInput.tsx

@@ -1,7 +1,5 @@
-import { ActionIcon, TextInput } from '@mantine/core';
+import { TextInput, type TextInputProps } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { FiX } from 'react-icons/fi';
-import { textInputClasses } from 'styles';
 
 export function DebouncedInput({
 	value: initialValue,
@@ -12,7 +10,7 @@ export function DebouncedInput({
 	value: string | number;
 	onChange: (value: string | number) => void;
 	debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+} & Omit<TextInputProps, 'onChange'>) {
 	const [value, setValue] = useState(initialValue);
 
 	useEffect(() => {
@@ -25,43 +23,14 @@ export function DebouncedInput({
 		}, debounce);
 
 		return () => clearTimeout(timeout);
-	}, [value, debounce, onChange]);
+	}, [value]);
 
 	return (
 		<TextInput
 			{...props}
 			value={value}
-			size='sm'
-			p={0}
 			onClick={(e) => e.stopPropagation()}
 			onChange={(e) => setValue(e.target.value)}
-			classNames={textInputClasses}
-			styles={{
-				input: {
-					borderRadius: 0,
-					borderStyle: 'none',
-					color: 'var(--mantine-color-primary-0)',
-					'&::placeholder': {
-						color: 'red !important',
-					},
-				},
-				wrapper: {
-					'&::placeholder': {
-						color: 'red !important',
-					},
-				},
-			}}
-			rightSection={
-				value && (
-					<ActionIcon
-						onClick={() => {
-							setValue('');
-						}}
-					>
-						<FiX />
-					</ActionIcon>
-				)
-			}
 		/>
 	);
 }