90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState, type CSSProperties } from "react";
|
|
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
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 toastFontClassName = isArabic ? "font-arabic text-right tracking-normal" : "font-latin text-left";
|
|
const toasterStyle: CSSProperties & Record<"--width", string> = {
|
|
"--width": "max-content",
|
|
left: "50%",
|
|
right: "auto",
|
|
transform: "translateX(-50%)",
|
|
...(props.style ?? {}),
|
|
};
|
|
|
|
return (
|
|
<Sonner
|
|
{...props}
|
|
dir={props.dir ?? "ltr"}
|
|
theme={resolvedTheme as ToasterProps["theme"]}
|
|
position={props.position ?? "top-center"}
|
|
duration={props.duration ?? 1800}
|
|
closeButton={props.closeButton ?? false}
|
|
offset={props.offset ?? "16px"}
|
|
mobileOffset={props.mobileOffset ?? "16px"}
|
|
className={cn("toaster group", props.className)}
|
|
style={toasterStyle}
|
|
toastOptions={{
|
|
...props.toastOptions,
|
|
style: {
|
|
...(props.toastOptions?.style ?? {}),
|
|
borderRadius: "16px",
|
|
padding: "10px 12px",
|
|
minWidth: "0",
|
|
maxWidth: "min(calc(100vw - 2rem), 32rem)",
|
|
background: "hsl(var(--card))",
|
|
color: "hsl(var(--card-foreground))",
|
|
border: "1px solid hsl(var(--border))",
|
|
direction: isArabic ? "rtl" : "ltr",
|
|
textAlign: isArabic ? "right" : "left",
|
|
},
|
|
classNames: {
|
|
...props.toastOptions?.classNames,
|
|
toast: cn(
|
|
"group toast group-[.toaster]:min-w-0 group-[.toaster]:w-fit group-[.toaster]:max-w-[min(calc(100vw-2rem),32rem)] group-[.toaster]:rounded-[16px] group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:px-3 group-[.toaster]:py-2 group-[.toaster]:text-card-foreground group-[.toaster]:shadow-panel",
|
|
toastFontClassName,
|
|
props.toastOptions?.classNames?.toast,
|
|
),
|
|
title: cn(
|
|
"text-[13px] font-medium leading-5",
|
|
isArabic ? "text-right" : "text-left",
|
|
props.toastOptions?.classNames?.title,
|
|
),
|
|
description: cn(
|
|
"text-[13px] leading-5 text-muted-foreground",
|
|
isArabic ? "text-right" : "text-left",
|
|
props.toastOptions?.classNames?.description,
|
|
),
|
|
default: cn(
|
|
"border-border bg-card text-card-foreground",
|
|
props.toastOptions?.classNames?.default,
|
|
),
|
|
success: cn(
|
|
"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",
|
|
props.toastOptions?.classNames?.success,
|
|
),
|
|
error: cn(
|
|
"border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
|
|
props.toastOptions?.classNames?.error,
|
|
),
|
|
closeButton: "hidden",
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|