refactor(client): Isolate dataset card buttons

client/src/components/dataset-card/date-controls.tsx

@@ -1,6 +1,5 @@
 import { getMonth } from "date-fns";
 import { format } from "date-fns/format";
-import * as React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";

client/src/components/dataset-card/download-chart-button.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import GraphIcon from "@/svgs/graph.svg";
+
+interface DownloadChartButtonProps {
+  data: unknown;
+  fileName: string;
+  disabled: boolean;
+}
+
+const DownloadChartButton = ({ data, fileName, disabled }: DownloadChartButtonProps) => {
+  const onClickSaveChartData = useCallback(() => {
+    const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = URL.createObjectURL(blob);
+    link.click();
+    link.remove();
+  }, [data, fileName]);
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="group/chart"
+            disabled={disabled}
+            onClick={onClickSaveChartData}
+          >
+            <span className="sr-only">Save chart data</span>
+            <GraphIcon
+              className="!size-4 transition-colors group-hover/chart:text-casper-blue-300"
+              aria-hidden
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Save chart data</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default DownloadChartButton;

client/src/components/dataset-card/download-layer-button.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import DownloadIcon from "@/svgs/download.svg";
+
+interface DownloadLayerButtonProps {
+  link: string;
+  fileName: string;
+}
+
+const DownloadLayerButton = ({ link, fileName }: DownloadLayerButtonProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon-sm" className="group/download" asChild>
+            <Link href={link} rel="noopener noreferrer" download={fileName}>
+              <span className="sr-only">Download</span>
+              <DownloadIcon
+                className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                aria-hidden
+              />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Download dataset</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default DownloadLayerButton;