Button - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from "react"; import { Button } from "react bootstrap"; import Swal from "sweetalert2"; import Dashboard from "./Dashboard"; import config from "../../config/config"; function DashboardWrapper({ isCameraSelected, showDashboard, setShowDashboard }) { const [undetectedChartData, setUndetectedChartData] = useState(null); const [identifiedChartData, setIdentifiedChartData] = useState(null); const [historicalUndetectedChartData, setHistoricalUndetectedChartData] = useState(null); const [historicalIdentifiedChartData, setHistoricalIdentifiedChartData] = useState(null); useEffect(() => { if (showDashboard) { const loadDashboardData = async () => { try { const [undetectedLogs, identifiedLogs, historicalUndetectedLogs, historicalIdentifiedLogs] = await Promise.all([ fetchLogs(`${config.apiUrl}/reports/undetected/daily`), fetchLogs(`${config.apiUrl}/reports/employee/daily`), fetchLogs(`${config.apiUrl}/reports/undetected/historic`), fetchLogs(`${config.apiUrl}/reports/employee/historic`), ]); setUndetectedChartData(formatChartData(undetectedLogs, "Intentos Fallidos de Detección")); setIdentifiedChartData(formatEmployeeData(identifiedLogs, "Detecciones de Empleados Diario")); setHistoricalUndetectedChartData( formatChartData(historicalUndetectedLogs, "Histórico de Intentos Fallidos") ); setHistoricalIdentifiedChartData( formatEmployeeData(historicalIdentifiedLogs, "Histórico de Detecciones de Empleados") ); } catch (error) { Swal.fire("Error", "Error al cargar los datos del dashboard.", "error"); } }; loadDashboardData(); } }, [showDashboard]); const fetchLogs = async (url) => { const response = await fetch(url); if (!response.ok) { throw new Error(`Error al obtener los datos de ${url}`); } const data = await response.json(); return data.data; }; const formatChartData = (logs, label) => ({ labels: logs.slice(1).map((log) => log[1]), datasets: [ { label, data: logs.slice(1).map((log) => log[0]), borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", fill: true, }, ], }); const formatEmployeeData = (logs, label) => { const employeeCounts = logs.slice(1).reduce((acc, log) => { const name = `${log[0]} ${log[1]}`; acc[name] = (acc[name] || 0) + 1; return acc; }, {}); return { labels: Object.keys(employeeCounts), datasets: [ { label, data: Object.values(employeeCounts), backgroundColor: "rgba(54, 162, 235, 0.2)", borderColor: "rgba(54, 162, 235, 1)", borderWidth: 1, }, ], }; }; const handleDownloadCSV = () => { const downloadCSV = (data, filename) => { const csvContent = "data:text/csv;charset=utf 8," + data.map((e) => e.join(",")).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", `${filename}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; if (undetectedChartData) { downloadCSV(undetectedChartData.datasets[0].data, "Intentos_Fallidos_Diarios"); } if (historicalUndetectedChartData) { downloadCSV(historicalUndetectedChartData.datasets[0].data, "Historico_Intentos_Fallidos"); } if (identifiedChartData) { downloadCSV(identifiedChartData.datasets[0].data, "Detecciones_Empleados_Diarias"); } if (historicalIdentifiedChartData) { downloadCSV(historicalIdentifiedChartData.datasets[0].data, "Historico_Detecciones_Empleados"); } }; return ( <> {isCameraSelected && ( <Button variant="primary" onClick={() => setShowDashboard((prev) => !prev)} style={{ marginBottom: "10px", position: "fixed", bottom: "20px", right: "20px", backgroundColor: "rgba(0, 0, 0, 0.5)", border: "none", padding: "10px 20px", borderRadius: "10px", transition: "all 0.3s ease", zIndex: 9999, }} onMouseEnter={(e) => { e.target.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; }} onMouseLeave={(e) => { e.target.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; }} > {showDashboard ? "Volver al Video" : "Ver Reportes"} </Button> )} {showDashboard && ( <Dashboard undetectedChartData={undetectedChartData} identifiedChartData={identifiedChartData} historicalUndetectedChartData={historicalUndetectedChartData} historicalIdentifiedChartData={historicalIdentifiedChartData} handleDownloadCSV={handleDownloadCSV} /> )} </> ); } export default DashboardWrapper; Como mejorarías estos botones? #07143d, #f4f4f8, relacion cromatica y que sean responsive. es importante que se vean por encima y puedan transparentar el fondo.