A toast notification tray where alerts fall under simulated gravity and pile into a jostling heap, with heavier severities sinking and the pile resettling when a toast is dismissed or swiped away.
"use client";
import ToastGravityStack from "@/components/ui/toast-gravity-stack";
import { useRef } from "react";
export default function ToastGravityStackDemo() {
const stackRef = useRef<any>(null);
return (
<div className="flex h-screen w-full flex-col items-center justify-center gap-6 bg-background p-6">
<div className="flex gap-2">
<button
type="button"
onClick={() =>
stackRef.current?.push({
severity: "info",
title: "Deployment complete",
message: "build #482 shipped to production",
})
}
className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
>
Info
</button>
<button
type="button"
onClick={() =>
stackRef.current?.push({
severity: "warning",
title: "High memory usage",
message: "worker-3 at 92% RSS",
})
}
className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
>
Warning
</button>
<button
type="button"
onClick={() =>
stackRef.current?.push({
severity: "error",
title: "Payment failed",
message: "card declined by issuer",
})
}
className="rounded-sm border border-border bg-surface px-3 py-1.5 text-sm text-foreground hover:border-foreground/20"
>
Error
</button>
</div>
<ToastGravityStack ref={stackRef} className="h-96 w-full max-w-md" />
</div>
);
}