34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { FormEvent, useState } from 'react';
|
|
import { useAddToWatchlist } from '../../hooks/useWatchlist';
|
|
|
|
export function AddTickerForm() {
|
|
const [symbol, setSymbol] = useState('');
|
|
const addMutation = useAddToWatchlist();
|
|
|
|
function handleSubmit(e: FormEvent) {
|
|
e.preventDefault();
|
|
const trimmed = symbol.trim().toUpperCase();
|
|
if (!trimmed) return;
|
|
addMutation.mutate(trimmed, { onSuccess: () => setSymbol('') });
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={symbol}
|
|
onChange={(e) => setSymbol(e.target.value)}
|
|
placeholder="Add symbol (e.g. AAPL)"
|
|
className="input-glass px-3 py-2 text-sm"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={addMutation.isPending || !symbol.trim()}
|
|
className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span>{addMutation.isPending ? 'Adding…' : 'Add'}</span>
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|