Use new card deck format for buildings

packages/frontend/src/Components/BuildingCardsDeck/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import {
+  Building,
+  BuildingImage,
+} from "@ccss-support-manual/models";
+
+import { CardDeck } from "../CardDeck";
+import { Card, HoverEffect } from "../Card";
+
+interface Props {
+  buildings: Building[];
+  buildingsImages: BuildingImage[];
+}
+
+export const BuildingCardsDeck = (props: Props) => {
+  const {
+    buildings,
+    buildingsImages,
+  } = props;
+  return (
+    <CardDeck center>
+      {buildings.map((building) => {
+        const coverImages = buildingsImages.filter((image) => image.buildingName === building.internalName);
+        return (
+          <Card
+            hoverEffect={HoverEffect.Grayscale}
+            className="shadow-sm"
+            key={`building-card-${building.internalName}`}
+            width="350px"
+            img={coverImages.length > 0 ? `/${escape(coverImages[0].thumbnail.path)}` : "/img/300x200.png"}
+            wrappedURL={`/buildings/${building.internalName}`}
+            title={`${building.officialName}`}
+            body={(
+              <>
+                <p className="m-0 pt-3">{building.officialName}</p>
+              </>
+            )}
+          />
+        );
+      })}
+    </CardDeck>
+  );
+};

packages/frontend/src/Sections/BuildingsSection/index.tsx

@@ -18,6 +18,7 @@ import BuildingCardsGrid from "../../Components/BuildingCardsGrid";
 import { FloatingGroup, FloatingGroupOrientation } from "../../Components/FloatingGroup";
 import { AnchorButton } from "../../Components/AnchorButton";
 import { ButtonType } from "../../Components/Button";
+import { BuildingCardsDeck } from "../../Components/BuildingCardsDeck";
 
 interface Props {
   buildingsState: BuildingsState;
@@ -88,9 +89,9 @@ const BuildingsSection = (props: Props) => {
           </div>
         </div>
 
-        <BuildingCardsGrid
+        <BuildingCardsDeck
           buildings={filteredBuildings}
-          images={imagesState}
+          buildingsImages={imagesState.buildingImages}
         />
 
         <FloatingGroup orientation={FloatingGroupOrientation.Horizontal} bottom left>