Add common IIIF share component.

components/Shared/IIIF/Share.tsx

@@ -0,0 +1,5 @@
+const IIIFShare = ({ uri }) => {
+  return <>resource: {uri}</>;
+};
+
+export default IIIFShare;

components/Work/TopInfo.tsx

@@ -15,6 +15,7 @@ import { Button } from "@nulib/design-system";
 import Card from "@/components/Shared/Card";
 import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled";
 import Expand from "@/components/Shared/Expand/Expand";
+import IIIFShare from "../Shared/IIIF/Share";
 import { Manifest } from "@iiif/presentation-3";
 import type { Work } from "@nulib/dcapi-types";
 import WorkActionsDialog from "@/components/Work/ActionsDialog/ActionsDialog";
@@ -72,6 +73,7 @@ const WorkTopInfo: React.FC<TopInfoProps> = ({
     <TopInfoWrapper>
       <header>
         <Label label={manifest.label} as="h1" data-testid="title" />
+        <IIIFShare uri={manifest.id} />
         {manifest?.summary && (
           <Summary summary={manifest.summary} as="p" data-testid="summary" />
         )}

lib/dc-api.ts

@@ -1,6 +1,8 @@
 import axios, { AxiosError, RawAxiosRequestHeaders } from "axios";
 
 import type { ApiSearchRequestBody } from "@/types/api/request";
+import { DC_API_SEARCH_URL } from "./constants/endpoints";
+import { NextRouter } from "next/router";
 
 interface ApiGetRequestParams {
   url: string;
@@ -72,6 +74,16 @@ async function getIIIFResource<R>(
   }
 }
 
+function iiifSearchUrl(query: NextRouter["query"], size?: number): string {
+  const url = new URL(DC_API_SEARCH_URL);
+  Object.keys(query).forEach((key) => {
+    url.searchParams.append(key, query[key] as string);
+  });
+  if (size) url.searchParams.append("size", size.toString());
+  url.searchParams.append("as", "iiif");
+  return url.toString();
+}
+
 function handleError(err: unknown) {
   const error = err as AxiosError;
   if (error.response) {
@@ -96,4 +108,5 @@ export {
   apiPostRequest,
   getIIIFResource,
   handleError,
+  iiifSearchUrl,
 };

pages/collections/[id].tsx

@@ -33,6 +33,7 @@ import Container from "@/components/Shared/Container";
 import Facts from "@/components/Shared/Facts";
 import Head from "next/head";
 import Hero from "@/components/Hero/Hero";
+import IIIFShare from "@/components/Shared/IIIF/Share";
 import Layout from "components/layout";
 import ReadMore from "@/components/Shared/ReadMore";
 import { buildDataLayer } from "@/lib/ga/data-layer";
@@ -172,6 +173,7 @@ const Collection: NextPage = () => {
                 </Facts>
               </Container>
             </Interstitial>
+            <IIIFShare />
             <Container>
               <Tabs defaultValue="explore">
                 <TabsList aria-label="Explore">