38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
|
import type { FormEvent } from "react";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Search } from "lucide-react";
|
||
|
|
|
||
|
|
interface StockSearchFormProps {
|
||
|
|
keyword: string;
|
||
|
|
onKeywordChange: (value: string) => void;
|
||
|
|
onSubmit: (e: FormEvent) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
isLoading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StockSearchForm({
|
||
|
|
keyword,
|
||
|
|
onKeywordChange,
|
||
|
|
onSubmit,
|
||
|
|
disabled,
|
||
|
|
isLoading,
|
||
|
|
}: StockSearchFormProps) {
|
||
|
|
return (
|
||
|
|
<form onSubmit={onSubmit} className="flex gap-2">
|
||
|
|
<div className="relative flex-1">
|
||
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
|
|
<Input
|
||
|
|
placeholder="종목명 또는 코드(6자리) 입력..."
|
||
|
|
className="pl-9"
|
||
|
|
value={keyword}
|
||
|
|
onChange={(e) => onKeywordChange(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Button type="submit" disabled={disabled || isLoading}>
|
||
|
|
{isLoading ? "검색 중..." : "검색"}
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|