Add tests.

components/Search/Results.tsx

@@ -8,17 +8,22 @@ import {
 import Grid from "@/components/Grid/Grid";
 import IIIFShare from "../Shared/IIIF/Share";
 import PaginationAltCounts from "@/components/Search/PaginationAltCounts";
+import { SEARCH_RESULTS_PER_PAGE } from "@/lib/constants/common";
 import { SearchResultsState } from "@/types/components/search";
+import { iiifSearchUri } from "@/lib/dc-api";
 import { pluralize } from "@/lib/utils/count-helpers";
 import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
+import { useRouter } from "next/router";
 
 const SearchResults: React.FC<SearchResultsState> = ({
   data,
   error,
   loading,
 }) => {
   const { isChecked: isAI } = useGenerativeAISearchToggle();
+  const router = useRouter();
 
+  const iiifCollection = iiifSearchUri(router.query, SEARCH_RESULTS_PER_PAGE);
   const totalResults = data?.pagination?.total_hits;
 
   return (
@@ -33,7 +38,7 @@ const SearchResults: React.FC<SearchResultsState> = ({
                 <ResultsMessage data-testid="results-count">
                   {pluralize("result", totalResults)}
                 </ResultsMessage>
-                <IIIFShare uri="" />
+                <IIIFShare uri={iiifCollection} />
               </ResultsWrapperHeader>
             ) : (
               <NoResultsMessage>

components/Shared/IIIF/Share.tsx

@@ -1,10 +1,12 @@
 import * as Dropdown from "@radix-ui/react-dropdown-menu";
 
-import Icon, { IconStyled } from "../Icon";
 import { IconChevronDown, IconExternalLink } from "../SVG/Icons";
 
 import CopyText from "../CopyText";
 import IIIFLogo from "../SVG/IIIF";
+import IIIFViewerLink from "./ViewerLink";
+import Icon from "../Icon";
+import Link from "next/link";
 import { styled } from "@/stitches.config";
 
 const IIIFShare = ({ uri }: { uri: string }) => {
@@ -28,44 +30,44 @@ const IIIFShare = ({ uri }: { uri: string }) => {
         >
           <StyledDropdownLabel>View in...</StyledDropdownLabel>
           <Dropdown.Item>
-            <a
-              href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Clover IIIF
-            </a>
+            <IIIFViewerLink
+              viewer={{
+                label: "Clover IIIF",
+                href: "https://samvera-labs.github.io/clover-iiif/docs/viewer/demo",
+              }}
+              uri={uri}
+            />
           </Dropdown.Item>
           <Dropdown.Item>
-            <a
-              href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Mirador
-            </a>
+            <IIIFViewerLink
+              viewer={{
+                label: "Mirador",
+                href: "https://projectmirador.org/embed",
+              }}
+              uri={uri}
+            />
           </Dropdown.Item>
           <Dropdown.Item>
-            <a
-              href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Theseus
-            </a>
+            <IIIFViewerLink
+              viewer={{
+                label: "Theseus",
+                href: "https://theseusviewer.org",
+              }}
+              uri={uri}
+            />
           </Dropdown.Item>
           <StyledDropdownSeparator />
           <Dropdown.Item>
-            <a href={uri} target="_blank" rel="noreferrer">
+            <Link href={uri} target="_blank" rel="noreferrer">
               View Raw JSON
-            </a>
+            </Link>
           </Dropdown.Item>
           <Dropdown.Item>
             <CopyText textPrompt="Copy IIIF JSON" textToCopy={uri} />
           </Dropdown.Item>
           <StyledDropdownSeparator />
           <Dropdown.Item>
-            <a
+            <Link
               href="https://iiif.io/get-started/why-iiif/"
               target="_blank"
               rel="noreferrer"
@@ -85,7 +87,7 @@ const IIIFShare = ({ uri }: { uri: string }) => {
               >
                 <IconExternalLink />
               </Icon>
-            </a>
+            </Link>
           </Dropdown.Item>
         </StyledIIIFShareContent>
       </Dropdown.Root>

components/Shared/IIIF/ViewerLink.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+
+import React from "react";
+import ViewerLink from "./ViewerLink";
+
+describe("ViewerLink", () => {
+  const uri =
+    "https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json";
+  const viewer = {
+    label: "IIIF Viewer",
+    href: "https://example.org/iiif-viewer",
+  };
+
+  it("renders an `<a>` element to IIIF Viewer", () => {
+    render(<ViewerLink viewer={viewer} uri={uri} />);
+    expect(screen.getByText(viewer.label)).toBeInTheDocument();
+    expect(screen.getByText(viewer.label).closest("a")).toHaveAttribute(
+      "href",
+      `${viewer.href}?iiif-content=${encodeURIComponent(uri)}`,
+    );
+  });
+
+  it("renders an `<a>` element to IIIF Viewer with custom iiif-content param", () => {
+    render(
+      <ViewerLink
+        viewer={{ ...viewer, iiifContentParam: "manifest" }}
+        uri={uri}
+      />,
+    );
+    expect(screen.getByText(viewer.label)).toBeInTheDocument();
+    expect(screen.getByText(viewer.label).closest("a")).toHaveAttribute(
+      "href",
+      `${viewer.href}?manifest=${encodeURIComponent(uri)}`,
+    );
+  });
+});

components/Shared/IIIF/ViewerLink.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+interface IIIFViewerLinkProps {
+  viewer: {
+    label: string;
+    href: string;
+    iiifContentParam?: string;
+  };
+  uri: string;
+}
+
+const IIIFViewerLink: React.FC<IIIFViewerLinkProps> = ({ viewer, uri }) => {
+  const iiifContent = new URL(viewer.href);
+  iiifContent.searchParams.set(
+    viewer.iiifContentParam ? viewer.iiifContentParam : "iiif-content",
+    uri,
+  );
+
+  return (
+    <Link href={iiifContent.toString()} target="_blank" rel="noreferrer">
+      {viewer.label}
+    </Link>
+  );
+};
+
+export default IIIFViewerLink;

components/Work/TopInfo.styled.ts

@@ -67,6 +67,25 @@ const TopInfoWrapper = styled("section", {
   },
 });
 
+const TopInfoHeaderContent = styled("div", {
+  display: "flex",
+  justifyContent: "space-between",
+  padding: "0 0 $gr3",
+  gap: "$gr2",
+
+  "@sm": {
+    flexDirection: "column",
+    gap: "0",
+  },
+
+  "> div:last-child": {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+  },
+});
+
 const TopInfoCollection = styled("div", {
   padding: "$gr4 0",
 
@@ -77,4 +96,10 @@ const TopInfoCollection = styled("div", {
   },
 });
 
-export { ActionButtons, TopInfoCollection, TopInfoContent, TopInfoWrapper };
+export {
+  ActionButtons,
+  TopInfoCollection,
+  TopInfoContent,
+  TopInfoHeaderContent,
+  TopInfoWrapper,
+};

components/Work/TopInfo.tsx

@@ -2,6 +2,7 @@ import {
   ActionButtons,
   TopInfoCollection,
   TopInfoContent,
+  TopInfoHeaderContent,
   TopInfoWrapper,
 } from "@/components//Work/TopInfo.styled";
 import {
@@ -72,7 +73,7 @@ const WorkTopInfo: React.FC<TopInfoProps> = ({
   return (
     <TopInfoWrapper>
       <header>
-        <div>
+        <TopInfoHeaderContent>
           <div>
             <Label label={manifest.label} as="h1" data-testid="title" />
             {manifest?.summary && (
@@ -84,7 +85,7 @@ const WorkTopInfo: React.FC<TopInfoProps> = ({
             )}
           </div>
           <IIIFShare uri={manifest.id} />
-        </div>
+        </TopInfoHeaderContent>
 
         <ActionButtons>
           <Button