blob: 38e8447357f814376baeadd6198e112d84463dff (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
import type { FormEvent } from "react";
import type { SearchResult } from "@/types/api";
type Props = {
query: string;
searching: boolean;
results: SearchResult[];
marketStatus: { isOpen: boolean; status: string; time: string };
onChangeQuery: (value: string) => void;
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
onSelectTicker: (symbol: string) => void;
};
export function TopBar({ query, searching, results, marketStatus, onChangeQuery, onSubmit, onSelectTicker }: Props) {
const showDropdown = query.trim().length >= 2;
return (
<header className="psm-top">
<div className="psm-search-shell">
<form className="psm-search-form" onSubmit={onSubmit}>
<span className="psm-icon icon-search" aria-hidden />
<input value={query} onChange={(event) => onChangeQuery(event.target.value)} placeholder="Search ticker or company" aria-label="Search ticker" />
<span className="psm-kbd">Enter</span>
</form>
{showDropdown ? (
<div className="psm-search-dropdown">
{searching ? <div className="psm-search-status">Searching...</div> : null}
{!searching && results.length === 0 ? <div className="psm-search-status">No matches</div> : null}
{!searching
? results.map((result) => (
<button key={`${result.symbol}-${result.exchange}`} type="button" className="psm-search-result" onClick={() => onSelectTicker(result.symbol)}>
<span className="psm-search-result-symbol">{result.symbol}</span>
<span className="psm-search-result-copy">
{result.name}
{result.exchange ? ` · ${result.exchange}` : ""}
</span>
</button>
))
: null}
</div>
) : null}
</div>
<div className="psm-clock-group">
<div className="psm-market-status">
<span className={`psm-market-dot${marketStatus.isOpen ? " open" : ""}`} aria-hidden />
<span>{marketStatus.status}</span>
<span>{marketStatus.time}</span>
</div>
<div className="psm-account">
<span className="psm-icon icon-user" aria-hidden />
<span className="psm-account-avatar">T</span>
<span>Local Profile</span>
</div>
</div>
</header>
);
}
|
