70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React, { useState, useRef } from "react";
|
|
import { Link, useHistory } from "react-router-dom";
|
|
import useKeyboardShortcut from "use-keyboard-shortcut";
|
|
|
|
const Title: React.FC = () => {
|
|
const [search, setSearch] = useState<string>();
|
|
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
|
const history = useHistory();
|
|
|
|
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
setCanSubmit(e.target.value.trim().length > 0);
|
|
setSearch(e.target.value.trim());
|
|
};
|
|
|
|
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
|
|
e.preventDefault();
|
|
if (!canSubmit) {
|
|
return;
|
|
}
|
|
|
|
history.push(`/search?q=${search}`);
|
|
};
|
|
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
useKeyboardShortcut(["/"], () => {
|
|
searchRef.current?.focus();
|
|
});
|
|
|
|
return (
|
|
<div className="px-9 py-2 flex justify-between items-baseline">
|
|
<Link className="self-center" to="/">
|
|
<div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
|
|
<img
|
|
className="rounded-full"
|
|
src="/otter.jpg"
|
|
width={32}
|
|
height={32}
|
|
alt="An otter scanning"
|
|
title="An otter scanning"
|
|
/>
|
|
<span>Otterscan</span>
|
|
</div>
|
|
</Link>
|
|
<form
|
|
className="flex"
|
|
onSubmit={handleSubmit}
|
|
autoComplete="off"
|
|
spellCheck={false}
|
|
>
|
|
<input
|
|
className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
|
|
type="text"
|
|
size={60}
|
|
placeholder='Type "/" to search by address / txn hash / block number / ENS name'
|
|
onChange={handleChange}
|
|
ref={searchRef}
|
|
/>
|
|
<button
|
|
className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
|
|
type="submit"
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Title);
|