new tabla and new dowload

src/components/Dowload/tablaCount.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+
+export default function DownloadTableCount() {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/excel/tabla/count`,
+        { headers }
+      );
+
+      if (!response.ok) {
+        throw new Error("Error al descargar el archivo");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "reporte.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} 
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
+    </button>
+  );
+}