49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import type { FormEvent } from "react";
|
|
import { Search } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface StockSearchFormProps {
|
|
keyword: string;
|
|
onKeywordChange: (value: string) => void;
|
|
onSubmit: (event: FormEvent) => void;
|
|
onInputFocus?: () => void;
|
|
disabled?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
/**
|
|
* @description 종목 검색 입력/제출 폼을 렌더링합니다.
|
|
* @see features/dashboard/components/DashboardContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
|
|
*/
|
|
export function StockSearchForm({
|
|
keyword,
|
|
onKeywordChange,
|
|
onSubmit,
|
|
onInputFocus,
|
|
disabled,
|
|
isLoading,
|
|
}: StockSearchFormProps) {
|
|
return (
|
|
<form onSubmit={onSubmit} className="flex gap-2">
|
|
{/* ========== SEARCH INPUT ========== */}
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground dark:text-brand-100/65" />
|
|
<Input
|
|
value={keyword}
|
|
onChange={(e) => onKeywordChange(e.target.value)}
|
|
onFocus={onInputFocus}
|
|
placeholder="종목명 또는 종목코드(6자리)를 입력하세요."
|
|
autoComplete="off"
|
|
className="pl-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
|
|
/>
|
|
</div>
|
|
|
|
{/* ========== SUBMIT BUTTON ========== */}
|
|
<Button type="submit" disabled={disabled || isLoading}>
|
|
{isLoading ? "검색 중..." : "검색"}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|