44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Toaster — sonner mounted with our palette tokens, so toasts read the
|
|
* same `--card`, `--foreground`, etc. variables the rest of the site uses.
|
|
* That keeps notifications on-theme across all six light/dark palettes
|
|
* without per-palette overrides.
|
|
*/
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { Toaster as SonnerToaster } from "sonner";
|
|
|
|
export function Toaster() {
|
|
const { resolvedTheme } = useTheme();
|
|
return (
|
|
<SonnerToaster
|
|
theme={(resolvedTheme as "light" | "dark") || "light"}
|
|
position="bottom-right"
|
|
// SiteBottomNav sits at the viewport bottom on small screens
|
|
// (md:hidden). Without this, sonner stacks toasts right on top of
|
|
// the nav. 5rem clears the ~64px nav with a little breathing room.
|
|
// Desktop is unaffected — the regular `offset` prop is left at
|
|
// its default.
|
|
mobileOffset={{ bottom: "5rem" }}
|
|
richColors={false}
|
|
closeButton
|
|
toastOptions={{
|
|
// Inline styles win over sonner's defaults, but stay token-driven
|
|
// so the active palette is honoured.
|
|
style: {
|
|
background: "var(--card)",
|
|
color: "var(--foreground)",
|
|
border: "1px solid var(--border)",
|
|
},
|
|
classNames: {
|
|
toast: "font-[family-name:var(--font-title)]",
|
|
description: "text-[var(--muted-foreground)]",
|
|
actionButton: "bg-[var(--primary)] text-[var(--primary-foreground)]",
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|