Search History tab

src/components/DebouncedInput.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon, TextInput } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { FiX } from 'react-icons/fi';
+
+export function DebouncedInput({
+	value: initialValue,
+	onChange,
+	debounce = 500,
+	...props
+}: {
+	value: string | number;
+	onChange: (value: string | number) => void;
+	debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+	const [value, setValue] = useState(initialValue);
+
+	useEffect(() => {
+		setValue(initialValue);
+	}, [initialValue]);
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			onChange(value);
+		}, debounce);
+
+		return () => clearTimeout(timeout);
+	}, [value, debounce, onChange]);
+
+	return (
+		<TextInput
+			{...props}
+			value={value}
+			size='sm'
+			p={0}
+			onClick={(e) => e.stopPropagation()}
+			onChange={(e) => setValue(e.target.value)}
+			styles={{
+				input: {
+					borderRadius: 0,
+					border: 'none',
+					color: 'var(--mantine-color-primary-0)',
+				},
+			}}
+			rightSection={
+				value && (
+					<ActionIcon
+						onClick={() => {
+							setValue('');
+						}}
+					>
+						<FiX />
+					</ActionIcon>
+				)
+			}
+		/>
+	);
+}