+
onChange(event.target.value)}
+ onKeyDown={onKeyDown}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ className={classNames(
+ "bg-surface-2 border border-border rounded px-3 py-2 w-full text-sm text-primary placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent",
+ className,
+ )}
+ />
+ {suggestions.length > 0 ? (
+
+ {suggestions.map((node, index) => (
+ -
+ {node}
+
+ ))}
+
+ ) : null}
+
+ );
+}
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 16d022a..81dbed1 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import {
MdAccountTree,
+ MdAdminPanelSettings,
MdInfo,
MdLogin,
MdLogout,
@@ -33,6 +34,13 @@ const navItems = [
},
];
+const adminNavItem = {
+ to: "/admin",
+ icon:
{showOpenProductionButton ? (
diff --git a/src/components/ui/Searchbar.tsx b/src/components/ui/Searchbar.tsx
index 4653b88..59f4f9f 100644
--- a/src/components/ui/Searchbar.tsx
+++ b/src/components/ui/Searchbar.tsx
@@ -1,7 +1,8 @@
-import { ReactElement, useState } from "react";
+import { ReactElement, ReactNode, useState } from "react";
import { Link, NavigateFunction, useNavigate } from "react-router-dom";
import classNames from "classnames";
import { Button } from "../core/Button";
+import { SuggestibleInput } from "../core/SuggestibleInput";
import {
formatCoordinateInspectHint,
inspectCoordinateQuery,
@@ -60,7 +61,6 @@ export function SearchBar({
const [focused, setFocused] = useState(false);
const navigate = useNavigate();
const onSearchHandler = onSearch ?? searchHandler(navigate);
- const suggestion = focused ? searchSuggestion(searchQuery) : null;
function handleSubmit() {
if (searchQuery.trim()) {
@@ -68,6 +68,35 @@ export function SearchBar({
}
}
+ function getSuggestions(value: string): ReactNode[] {
+ if (!focused) {
+ return [];
+ }
+ const suggestion = searchSuggestion(value);
+ if (!suggestion) {
+ return [];
+ }
+ const nodes: ReactNode[] = [
+
+ {suggestion.primary}
+
,
+ ];
+ if (suggestion.secondary) {
+ nodes.push(
+
+ {suggestion.secondary}
+
,
+ );
+ }
+ return nodes;
+ }
+
return (
-
-
+
setSearchQuery(e.target.value)}
+ onChange={setSearchQuery}
+ getSuggestions={getSuggestions}
+ placeholder="Search for an object..."
+ className="h-10 px-2 py-1"
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onKeyDown={(e) => {
@@ -108,14 +137,6 @@ export function SearchBar({
}
}}
/>
- {suggestion ? (
-
-
{suggestion.primary}
- {suggestion.secondary ? (
-
{suggestion.secondary}
- ) : null}
-
- ) : null}