mirror of
https://github.com/nicotsx/ironmount.git
synced 2025-12-10 12:10:51 +01:00
57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
import { Database, HardDrive, HeartPulse, Plus } from "lucide-react";
|
|
import { CreateVolumeDialog } from "./create-volume-dialog";
|
|
import { useState } from "react";
|
|
|
|
export function EmptyState() {
|
|
const [createVolumeOpen, setCreateVolumeOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-16 px-4 text-center">
|
|
<div className="relative mb-8">
|
|
<div className="absolute inset-0 animate-pulse">
|
|
<div className="w-32 h-32 rounded-full bg-primary/10 blur-2xl" />
|
|
</div>
|
|
|
|
<div className="relative flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/20">
|
|
<Database className="w-16 h-16 text-primary/70" strokeWidth={1.5} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-md space-y-3 mb-8">
|
|
<h3 className="text-2xl font-semibold text-foreground">No volumes yet</h3>
|
|
<p className="text-muted-foreground">
|
|
Get started by creating your first volume. Manage and monitor all your storage backends in one place with
|
|
advanced features like automatic mounting and health checks.
|
|
</p>
|
|
</div>
|
|
<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
|
|
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-0 max-w-3xl">
|
|
<div className="flex flex-col items-center gap-2 p-4 border bg-card-header">
|
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<Database className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<h4 className="font-medium text-sm">Multiple Backends</h4>
|
|
<p className="text-xs text-muted-foreground">Support for local, NFS, and SMB storage</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-2 p-4 border border-r-0 border-l-0 bg-card-header">
|
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<HardDrive className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<h4 className="font-medium text-sm">Auto Mounting</h4>
|
|
<p className="text-xs text-muted-foreground">Automatic lifecycle management</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-2 p-4 border bg-card-header">
|
|
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
|
<HeartPulse className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<h4 className="font-medium text-sm">Real-time Monitoring</h4>
|
|
<p className="text-xs text-muted-foreground">Live status and health checks</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|