Add content type specific placeholder images to search

app/src/components/card/searchCardImage.tsx

@@ -2,10 +2,22 @@ import Image from "next/image";
 import React from "react";
 import { useState } from "react";
 import { Box } from "@nypl/design-system-react-components";
+import SearchCardType from "@/src/types/SearchCardType";
 
-export const SearchCardImage = ({ record, viewMode }) => {
+type SearchCardImageProps = {
+  record: SearchCardType;
+  viewMode: "grid" | "list";
+};
+
+export const SearchCardImage = ({ record, viewMode }: SearchCardImageProps) => {
+  const fallbackImageSrc = {
+    Image: "/noImage.png",
+    Audio: "/noAudio.png",
+    Video: "/noVideo.png",
+  }[record.contentType ?? "Image"];
   const [imageSrc, setImageSrc] = useState(
-    record.videoThumbnail || (record.imageID ? record.imageURL : "/noImage.png")
+    record.videoThumbnail ||
+      (record.imageID ? record.imageURL : fallbackImageSrc)
   );
 
   return (
@@ -45,7 +57,7 @@ export const SearchCardImage = ({ record, viewMode }) => {
           console.warn(
             `SearchCardImage: Card image failed to load, fallback image loaded instead. ImageURL: ${record.imageURL}`
           );
-          setImageSrc("/noImage.png");
+          setImageSrc(fallbackImageSrc);
         }}
       />
     </Box>

app/src/types/SearchCardType.ts

@@ -8,6 +8,7 @@ export interface SearchCardType {
   url: string;
   imageID: string;
   imageURL: string;
+  videoThumbnail: string | null;
   recordType: SearchResultRecordType;
   numberOfDigitizedItems: number;
   containsOnSiteMaterial: boolean;