feat(web): Highlight (XSS-safe) + SearchResultRow components

2026-06-04 12:34:27 +02:00
parent de830999d4
commit ee65b27595
3 changed files with 89 additions and 0 deletions
@@ -0,0 +1,31 @@
+import { NavLink } from "react-router-dom";
+
+import type { components } from "../api/schema";
+import { VisibilityBadge } from "../objects/visibility-badge";
+import { Highlight } from "./highlight";
+
+type SearchHitView = components["schemas"]["SearchHitView"];
+
+export function SearchResultRow({ hit }: { hit: SearchHitView }) {
+  return (
+    <li>
+      <NavLink
+        to={`/search/${hit.id}`}
+        className={({ isActive }) =>
+          `block border-b px-3 py-2 ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
+        }
+      >
+        <div className="text-sm font-semibold">{hit.object_name}</div>
+        <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+          <span>{hit.object_number}</span>
+          <VisibilityBadge visibility={hit.visibility} />
+        </div>
+        {hit.snippet && (
+          <p className="mt-1 line-clamp-2 text-xs text-neutral-600">
+            <Highlight text={hit.snippet} />
+          </p>
+        )}
+      </NavLink>
+    </li>
+  );
+}