feat: use thumbnails

Author: gadomski

src/components/stac/catalog.tsx

@@ -2,6 +2,7 @@ import {
   Badge,
   Heading,
   HStack,
+  SimpleGrid,
   Skeleton,
   Stack,
   Text,
@@ -63,13 +64,15 @@ function Collections({
           <Heading size={"md"}>Collections</Heading>{" "}
           <Badge>{collections.length}</Badge>
         </HStack>
-        {collections.map((collection) => (
-          <CollectionCard
-            collection={collection}
-            setHref={setHref}
-            key={collection.id}
-          ></CollectionCard>
-        ))}
+        <SimpleGrid columns={{ base: 1, md: 2 }} gap={2}>
+          {collections.map((collection) => (
+            <CollectionCard
+              collection={collection}
+              setHref={setHref}
+              key={collection.id}
+            ></CollectionCard>
+          ))}
+        </SimpleGrid>
       </Stack>
     );
   }

src/components/stac/collection.tsx

@@ -3,6 +3,7 @@ import {
   DataList,
   HStack,
   IconButton,
+  Image,
   Stack,
   Text,
 } from "@chakra-ui/react";
@@ -56,6 +57,9 @@ export function CollectionCard({
 }) {
   const selfHref = getSelfHref(collection);
   const dispatch = useLayersDispatch();
+  const thumbnail = Object.values(collection.assets || {}).find((asset) =>
+    asset.roles?.includes("thumbnail")
+  );
 
   return (
     <Card.Root size={"sm"}>
@@ -64,8 +68,9 @@ export function CollectionCard({
       </Card.Header>
       <Card.Body>
         <Stack>
+          {thumbnail && <Image src={thumbnail.href}></Image>}
           <Text lineClamp={3}>{collection.description}</Text>
-          <DataList.Root orientation={"horizontal"}>
+          <DataList.Root>
             <DataList.Item>
               <DataList.ItemLabel>Bounding box</DataList.ItemLabel>
               <DataList.ItemValue>