feat(client): Add download link for Contextual layers

client/src/components/panels/contextual-layers/index.tsx

@@ -9,7 +9,7 @@ import XMarkIcon from "@/svgs/xmark.svg";
 import Item from "./item";
 
 const ContextualLayersPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("contextual");
+  const { data, isLoading } = useDatasetsBySubTopic("contextual", ["layer", "download_link"]);
 
   return (
     <>
@@ -71,6 +71,7 @@ const ContextualLayersPanel = () => {
                   // Assuming the dataset has just one layer, which is currently the case
                   id: dataset.layers[0].id!,
                   name: dataset.layers[0].attributes!.name!,
+                  downloadLink: dataset.layers[0].attributes!.download_link,
                 }))}
             />
           ))}

client/src/components/panels/contextual-layers/item.tsx

@@ -1,11 +1,16 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import useMapLayers from "@/hooks/use-map-layers";
+import { cn } from "@/lib/utils";
+import DownloadIcon from "@/svgs/download.svg";
 import { Dataset, Layer } from "@/types/generated/strapi.schemas";
 
 interface ItemProps {
   name: Dataset["name"];
-  layers: { id: number; name: Layer["name"] }[];
+  layers: { id: number; name: Layer["name"]; downloadLink?: Layer["download_link"] }[];
 }
 
 const Item = ({ name, layers }: ItemProps) => {
@@ -20,7 +25,30 @@ const Item = ({ name, layers }: ItemProps) => {
             <Label htmlFor={`${layer.id}-toggle`} className="text-xl">
               {layer.name}
             </Label>
-            <div className="pt-1">
+            <div className="flex items-center gap-0.5 pt-1">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className={cn({
+                  "group/download": true,
+                  "pointer-events-none opacity-20": !layer.downloadLink,
+                })}
+                aria-disabled={!layer.downloadLink}
+                tabIndex={!layer.downloadLink ? -1 : undefined}
+                asChild
+              >
+                <Link
+                  href={layer.downloadLink ?? ""}
+                  rel="noopener noreferrer"
+                  download={layer.name}
+                >
+                  <span className="sr-only">Download</span>
+                  <DownloadIcon
+                    className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                    aria-hidden
+                  />
+                </Link>
+              </Button>
               <Switch
                 id={`${layer.id}-toggle`}
                 checked={layersConfiguration.findIndex(({ id }) => id === layer.id) !== -1}