ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: volume stats & charts

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-25 21:16:55 +02:00
parent c261590ea3
commit 6b386d28d6
12 changed files with 626 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/client/app/modules/details/components/storage-info-card.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { Database, HardDrive } from "lucide-react";
import { ByteSize } from "~/components/bytes-size";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import type { StatFs } from "~/lib/types";
type Props = {
statfs: StatFs;
};
export function StorageInfoCard({ statfs }: Props) {
return (
<Card className="h-full text-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Database className="h-4 w-4" />
Storage Details
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-col h-full justify-center">
<div className="grid gap-4 w-full">
<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
<div className="flex items-center gap-3">
<HardDrive className="h-4 w-4 text-muted-foreground" />
<span className="font-medium">Total Capacity</span>
</div>
<ByteSize bytes={statfs.total} className="font-mono text-sm" />
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
<div className="flex items-center gap-3">
<div className="h-4 w-4 rounded-full bg-blue-500" />
<span className="font-medium">Used Space</span>
</div>
<div className="text-right">
<ByteSize bytes={statfs.used} className="font-mono text-sm" />
</div>
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
<div className="flex items-center gap-3">
<div className="h-4 w-4 rounded-full bg-primary" />
<span className="font-medium">Free Space</span>
</div>
<div className="text-right">
<ByteSize bytes={statfs.free} className="font-mono text-sm" />
</div>
</div>
</div>
</div>
</CardContent>
</Card>
);
}