blob: 49bcec7fd9c1b19c8acdfea4ebf737d3921e3f3e (
plain) (
blame)
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
62
63
64
|
import React from "react";
import { Link } from "react-router-dom";
import { Search } from "@customTypes/Search";
import { API } from "@api/Api";
import { UserProfile } from "@customTypes/Profile";
interface SearchProps {
profile?: UserProfile;
searchbarRef: React.RefObject<HTMLInputElement | null>;
};
const _Search: React.FC<SearchProps> = ({ profile, searchbarRef }) => {
const [searchData, setSearchData] = React.useState<Search | undefined>(
undefined
);
const _handle_search_change = async (q: string) => {
const searchResponse = await API.get_search(q);
setSearchData(searchResponse);
};
return (
<div className="flex w-full flex-col p-3 not-md:absolute">
<input
ref={searchbarRef}
type="text"
id="searchbar"
placeholder="Search for map or a player..."
onChange={e => _handle_search_change(e.target.value)}
className="w-full py-2 px-[19px] bg-input rounded-[2000px] outline-none placeholder-bright placeholder:text-[18px] placeholder:font-barlow-semicondensed-regular"
/>
{searchData && (
<div className="overflow-y-auto">
{searchData?.maps.map((q, index) => (
<Link to={`/maps/${q.id}`} className="block p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0" key={index}>
<span className="block text-xs text-subtext1 truncate">{q.game}</span>
<span className="block text-xs text-subtext1 truncate">{q.chapter}</span>
<span className="block text-sm text-foreground truncate">{q.map}</span>
</Link>
))}
{searchData?.players.map((q, index) => (
<Link
to={
profile && q.steam_id === profile.steam_id
? `/profile`
: `/users/${q.steam_id}`
}
className="flex items-center p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0"
key={index}
>
<img src={q.avatar_link} alt="pfp" className="w-6 h-6 rounded-full mr-2 flex-shrink-0" />
<span className="text-sm text-foreground truncate">
{q.user_name}
</span>
</Link>
))}
</div>
)}
</div>
)
}
export default _Search;
|