Storage Card - Copy this React, Tailwind Component to your project

now you can use this data to generate a new card"use client" import { getTotalStorageUsage } from "@/lib/firestore/archivos/read-server"; import { Pie, PieChart, TooltipProps } from "recharts"; import { useEffect, useState } from "react"; import { ChartConfig, ChartContainer, ChartTooltip, } from "@/components/ui/chart"; const MAX_STORAGE = 1 * 1024 * 1024 * 1024; const formatStorage = (bytes: number) => { if (bytes < 1024 * 1024 * 1024) { return `${(bytes / (1024 * 1024)).toFixed(2)} MB`; } else { return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`; } }; const DocumentosEquiposChart = () => { const [total, setTotal] = useState<number>(0); useEffect(() => { const fetchTotal = async () => { const total = await getTotalStorageUsage({ folder: "equipos" }); setTotal(total); } fetchTotal(); }, [total]) const remainingStorage = MAX_STORAGE - total; const chartData = [ { name: "Usado", value: total, fill: "#4CAF50" }, { name: "Restante", value: remainingStorage, fill: "#E0E0E0" } ]; const chartConfig = { used: { label: "Usado", color: "#4CAF50", }, remaining: { label: "Restante", color: "#E0E0E0", }, } satisfies ChartConfig; const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) => { if (active && payload && payload.length) { const { name, value } = payload[0]; return ( <div className="bg-white p-4 text-[14px] border shadow-lg"> <p className="font-extrabold"> {`${name}:`}{" "} <span className="font-bold"> {formatStorage(value || 0)} </span> </p> </div> ); } return null; }; return ( <div> <ChartContainer config={chartConfig} className="aspect-square max-h-[250px]" > <PieChart> <ChartTooltip cursor={false} content={<CustomTooltip />} /> <Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} outerRadius={80} /> </PieChart> </ChartContainer> </div> ) } export default DocumentosEquiposChart