54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
|
|
|
export function Toaster(props: ToasterProps) {
|
|
const pathname = usePathname();
|
|
const { resolvedTheme = "light" } = useTheme();
|
|
const [documentLang, setDocumentLang] = useState("de");
|
|
|
|
useEffect(() => {
|
|
setDocumentLang(document.documentElement.lang || "de");
|
|
}, [pathname]);
|
|
|
|
const isArabic = documentLang === "ar";
|
|
const toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";
|
|
|
|
return (
|
|
<Sonner
|
|
theme={resolvedTheme as ToasterProps["theme"]}
|
|
position="top-center"
|
|
duration={2400}
|
|
toastOptions={{
|
|
style: {
|
|
borderRadius: "16px",
|
|
padding: "10px 12px",
|
|
width: "fit-content",
|
|
minWidth: "0",
|
|
maxWidth: "min(calc(100vw - 2rem), 32rem)",
|
|
background: "hsl(var(--card))",
|
|
color: "hsl(var(--card-foreground))",
|
|
border: "1px solid hsl(var(--border))",
|
|
fontFamily: toastFontFamily,
|
|
},
|
|
classNames: {
|
|
toast:
|
|
"w-fit min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
|
|
default:
|
|
"border-border bg-card text-card-foreground",
|
|
title: "text-[13px] font-medium leading-5",
|
|
description: "text-[13px] leading-5 text-muted-foreground",
|
|
success:
|
|
"border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
|
|
error:
|
|
"border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
|
|
},
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|