feat: add TiTiler link for items

Author: gadomski

src/components/value.tsx

@@ -39,31 +39,46 @@ export default function Value({
 
         {children}
 
-        {selfHref && <SelfHrefButtons href={selfHref}></SelfHrefButtons>}
+        {selfHref && (
+          <SelfHrefButtons
+            href={selfHref}
+            isItem={value.type === "Feature"}
+          ></SelfHrefButtons>
+        )}
       </Stack>
     </Section>
   );
 }
 
-function SelfHrefButtons({ href: selfHref }: { href: string }) {
+function SelfHrefButtons({ href, isItem }: { href: string; isItem: boolean }) {
   return (
     <ButtonGroup size={"xs"} variant={"outline"} py={4}>
       <Button asChild>
-        <a href={selfHref} target="_blank">
+        <a href={href} target="_blank">
           <LuExternalLink></LuExternalLink> Source
         </a>
       </Button>
       <Button asChild>
         <a
           href={
             "https://radiantearth.github.io/stac-browser/#/external/" +
-            selfHref.replace(/^(https?:\/\/)/, "")
+            href.replace(/^(https?:\/\/)/, "")
           }
           target="_blank"
         >
           <LuExternalLink></LuExternalLink> STAC Browser
         </a>
       </Button>
+      {isItem && (
+        <Button asChild>
+          <a
+            href={"https://titiler.xyz/stac/viewer?url=" + href}
+            target="_blank"
+          >
+            <LuExternalLink></LuExternalLink> TiTiler
+          </a>
+        </Button>
+      )}
     </ButtonGroup>
   );
 }

tests/panel.spec.tsx

@@ -33,4 +33,13 @@ describe("loading", () => {
       .element(app.getByRole("heading", { name: "Planet" }))
       .toBeVisible();
   });
+
+  test("Item has TiTiler link", async () => {
+    const app = renderApp(
+      "?href=https://raw.githubusercontent.com/radiantearth/stac-spec/refs/heads/master/examples/simple-item.json",
+    );
+    await expect
+      .element(app.getByRole("link", { name: "TiTiler" }))
+      .toBeVisible();
+  });
 });