"use client"; import { Database, Loader2, type LucideIcon, Trash2, TrendingDown, } from "lucide-react"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { FieldDescription, FieldLabel } from "@/registry/new-york/ui/field"; import { Progress } from "@/registry/new-york/ui/progress"; import { Separator } from "@/registry/new-york/ui/separator"; export interface StorageCategory { id: string; name: string; icon: LucideIcon; used: number; total?: number; color: string; } export interface SettingsStorageProps { totalUsed?: number; totalLimit?: number; categories?: StorageCategory[]; onCleanup?: (categoryId?: string) => Promise; className?: string; } function formatBytes(bytes: number): string { if (bytes === 0) return "0 Bytes"; const k = 1024; const sizes = ["Bytes", "KB", "MB", "GB", "TB"]; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`; } export default function SettingsStorage({ totalUsed = 0, totalLimit = 100 * 1024 * 1024 * 1024, // 100 GB default categories = [], onCleanup, className, }: SettingsStorageProps) { const [isCleaning, setIsCleaning] = useState(null); const usagePercentage = (totalUsed / totalLimit) * 100; const remaining = totalLimit - totalUsed; const handleCleanup = async (categoryId?: string) => { setIsCleaning(categoryId || "all"); try { await onCleanup?.(categoryId); } finally { setIsCleaning(null); } }; return (

Storage Manage your storage usage and quotas

{/* Overall Usage */}

Storage Usage

{formatBytes(totalUsed)} of {formatBytes(totalLimit)} used {usagePercentage.toFixed(1)}%

{formatBytes(remaining)} remaining

{/* Storage by Category */}

Storage by Category

{categories.length === 0 ? (

No storage data available

) : (

{categories.map((category) => { const Icon = category.icon; const categoryPercentage = category.total ? (category.used / category.total) * 100 : 0; return (

{category.name}

{category.total && ( {categoryPercentage.toFixed(1)}% )}

{formatBytes(category.used)} {category.total && ( of {formatBytes(category.total)} )}

{category.total && ( )}

Clean Up {category.name}? This will delete old and unused files from{" "} {category.name}. This action cannot be undone. Cancel handleCleanup(category.id)} > Clean Up

); })}

)}

{/* Cleanup Actions */}

Storage Optimization

Empty Trash? This will permanently delete all files in your trash. This action cannot be undone. Cancel handleCleanup()}> Empty Trash Remove old and unused files to free up storage space

); }

Storage by Category

Example Usage

Storage by Category