Skip to content

[FIX] Fix sonner presentation #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

[FIX] Fix sonner presentation #60

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d5d843
fix(sonner): update sonner to work properly in the website
h3rmel May 13, 2025
0c1cdfd
chore(sonner demo): remove console.log
h3rmel May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/(docs)/docs/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { format } from "date-fns";
import MDX from "@/components/MDX";
import { Text } from "@/components/retroui/Text";
import { Metadata } from "next";
import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
import { MoveUpRightIcon } from "lucide-react";

interface IProps {
params: { slug: string[] };
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function RootLayout({
/>
</head>
<body
className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable} bg-background text-foreground`}
className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable} bg-background text-foreground w-full min-h-dvh overflow-x-hidden size-full relative antialised scroll-smooth`}
>
<div className="relative z-40 pb-16">
<TopNav />
Expand Down
18 changes: 11 additions & 7 deletions components/retroui/Sonner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
"use client";

import { useTheme } from "next-themes";
import { Toaster as Sonner } from "sonner";

type ToasterProps = React.ComponentProps<typeof Sonner>;

const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme();

return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
toastOptions={{
classNames: {
toast:
"h-auto w-full p-4 bg-background border group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border flex items-center relative",
"!p-4 !bg-background !border !group !toast !group-[.toaster]:bg-background !rounded-none !group-[.toaster]:text-foreground !group-[.toaster]:border-border !flex !items-center !relative",
description:
"group-[.toast]:text-muted-foreground ml-2 text-sm font-sans",
"!group-[.toast]:text-muted-foreground !ml-2 !text-sm !font-sans",
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground py-1 px-2 bg-background border-border shadow border-2 ml-auto h-fit min-w-fit",
"!group-[.toast]:bg-primary !group-[.toast]:text-primary-foreground !rounded-none !py-1 !px-2 !bg-background !border-border !shadow !border-2 !ml-auto !h-fit !min-w-fit",
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-foreground py-1 px-2 text-sm bg-background border-border shadow border-2 ml-auto h-fit min-w-fit",
title: "ml-2 font-sans",
"!group-[.toast]:bg-muted !group-[.toast]:text-foreground !py-1 !px-2 !rounded-none !text-sm !bg-background !border-border !shadow !border-2 !ml-auto !h-fit !min-w-fit",
title: "!ml-2 !font-sans !text-base",
closeButton:
"absolute bg-background -top-1 -left-1 rounded-full p-0.5",
"!absolute !bg-background !-top-1 !-left-1 !rounded-full !p-0.5",
},
unstyled: true,
}}
{...props}
/>
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"lucide-react": "^0.445.0",
"next": "14.2.7",
"next-contentlayer": "^0.3.4",
"next-themes": "^0.4.6",
"react": "^18",
"react-dom": "^18",
"rehype-pretty-code": "^0.14.0",
Expand Down
14 changes: 14 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions preview/components/sonner-style-default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
"use client";

import { Button } from "@/components/retroui";
import { toast } from "sonner";

export default function SonnerStyleDefault() {
const onClick = () => {
console.log("clicked");
toast("Event has been created", {
description: "Sunday, December 03, 2025",
cancel: {
Expand Down