mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

fix sonner
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-11 17:47:51 +01:00
parent 7956b073e9
commit 03384c1bda
3 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
-39
View File
@@ -197,45 +197,6 @@ html[lang="ar"] {
color: hsl(var(--foreground));
}
[data-sonner-toaster][data-x-position="center"] {
left: 0;
right: 0;
display: flex;
justify-content: center;
width: 100%;
transform: none;
}
[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
width: fit-content;
min-width: 0;
max-width: min(calc(100vw - 2rem), 32rem);
margin-inline: 0;
}
@media (max-width: 600px) {
[data-sonner-toaster][data-x-position="center"] {
left: 0;
right: 0;
display: flex;
justify-content: center;
width: 100%;
transform: none;
}
[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
width: fit-content;
max-width: calc(100vw - 2rem);
margin-inline: 0;
}
[data-sonner-toaster][dir="rtl"][data-x-position="center"] {
left: 0;
right: 0;
transform: none;
}
}
@layer utilities {
.hero-noise {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
components/layout/site-header.tsx
+6 -1
View File
@@ -69,6 +69,7 @@ function NavLinks({
const t = useTranslations("navigation");
const currentPath = stripLocalePrefix(pathname);
const isArabic = locale === "ar";
const activeIndicatorLayoutId = mobile ? "mobile-site-nav-active-pill" : "site-nav-active-pill";
return (
<>
@@ -124,7 +125,11 @@ function NavLinks({
onClick={onNavigate}
>
{isActive ? (
<span className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs" />
<motion.span
layoutId={activeIndicatorLayoutId}
className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs"
transition={{ type: "spring", stiffness: 420, damping: 34, mass: 0.7 }}
/>
) : null}
{itemLabel}
</Link>
components/ui/sonner.tsx
+50 -13
View File
@@ -2,9 +2,11 @@
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
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();
@@ -15,15 +17,31 @@ export function Toaster(props: ToasterProps) {
}, [pathname]);
const isArabic = documentLang === "ar";
const toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";
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="top-center"
duration={1800}
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",
@@ -31,22 +49,41 @@ export function Toaster(props: ToasterProps) {
background: "hsl(var(--card))",
color: "hsl(var(--card-foreground))",
border: "1px solid hsl(var(--border))",
fontFamily: toastFontFamily,
direction: isArabic ? "rtl" : "ltr",
textAlign: isArabic ? "right" : "left",
},
classNames: {
toast:
"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:
...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",
title: "text-[13px] font-medium leading-5",
description: "text-[13px] leading-5 text-muted-foreground",
success:
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",
error:
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",
},
}}
{...props}
/>
);
}