Refactor search feature

Signed-off-by: Damian Stasik <[email protected]>

frontend/src/components/Header/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "../Icon";
 import { x } from "../../icons/x";
 import { slack } from "../../icons/slack";
 import { ThemeSwitcher } from "./ThemeSwitcher";
-import { Search } from "./Search";
+import { Search } from "../Search";
 
 export function Header() {
   return (

frontend/src/components/Search/ModuleResult.tsx

@@ -0,0 +1,14 @@
+import { SearchResult } from "./types";
+
+interface SearchModuleResultProps {
+  result: SearchResult;
+}
+
+export function SearchModuleResult({ result }: SearchModuleResultProps) {
+  return (
+    <>
+      <div className="text-sm">{result.addr}</div>
+      <div className="text-xs text-gray-500">{result.description}</div>
+    </>
+  );
+}

frontend/src/components/Search/OtherResult.tsx

@@ -0,0 +1,14 @@
+import { SearchResult } from "./types";
+
+interface SearchOtherResultProps {
+  result: SearchResult;
+}
+
+export function SearchOtherResult({ result }: SearchOtherResultProps) {
+  return (
+    <>
+      <div className="text-sm">{result.addr}</div>
+      <div className="text-xs text-gray-500">{result.description}</div>
+    </>
+  );
+}

frontend/src/components/Search/ProviderResult.tsx

@@ -0,0 +1,40 @@
+import { SearchResult, SearchResultType } from "./types";
+
+interface SearchProviderResultProps {
+  result: SearchResult;
+}
+
+export function SearchProviderResult({ result }: SearchProviderResultProps) {
+  if (result.type === SearchResultType.ProviderResource) {
+    return (
+      <>
+        <div className="text-sm">Resource: {result.title}</div>
+        <div className="text-sm">{result.addr}</div>
+        <div className="text-xs text-gray-500">{result.description}</div>
+      </>
+    );
+  } else if (result.type === SearchResultType.ProviderDatasource) {
+    return (
+      <>
+        <div className="text-sm">Data source: {result.title}</div>
+        <div className="text-sm">{result.addr}</div>
+        <div className="text-xs text-gray-500">{result.description}</div>
+      </>
+    );
+  } else if (result.type === SearchResultType.ProviderFunction) {
+    return (
+      <>
+        <div className="text-sm">Function: {result.title}</div>
+        <div className="text-sm">{result.addr}</div>
+        <div className="text-xs text-gray-500">{result.description}</div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="text-sm">{result.addr}</div>
+      <div className="text-xs text-gray-500">{result.description}</div>
+    </>
+  );
+}