feat: integrate FlashToast component and update Toaster usage

- Added FlashToast component to manage flash notifications.
- Updated app layout to include the Toaster component for displaying notifications.
- Refactored Sonner component to remove theme dependency.
This commit is contained in:
Yoga Pangestu 2026-07-29 01:35:34 +07:00
parent 5c1ef6a7b0
commit 46644428fc
4 changed files with 11 additions and 6 deletions

View File

@ -1,6 +1,7 @@
import { createInertiaApp } from '@inertiajs/react'; import { createInertiaApp } from '@inertiajs/react';
import { Toaster } from '@/components/ui/sonner'; import { Toaster } from '@/components/ui/sonner';
import { TooltipProvider } from '@/components/ui/tooltip'; import { TooltipProvider } from '@/components/ui/tooltip';
import { FlashToast } from '@/components/flash-toast';
import { initializeTheme } from '@/hooks/use-appearance'; import { initializeTheme } from '@/hooks/use-appearance';
import AppLayout from '@/layouts/app-layout'; import AppLayout from '@/layouts/app-layout';
import AuthLayout from '@/layouts/auth-layout'; import AuthLayout from '@/layouts/auth-layout';
@ -26,6 +27,7 @@ createInertiaApp({
withApp(app) { withApp(app) {
return ( return (
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>
<FlashToast />
{app} {app}
<Toaster /> <Toaster />
</TooltipProvider> </TooltipProvider>

View File

@ -0,0 +1,7 @@
import { useFlashToast } from '@/hooks/use-flash-toast';
export function FlashToast() {
useFlashToast();
return null;
}

View File

@ -1,15 +1,9 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner" import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react" import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => { const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group" className="toaster group"
icons={{ icons={{
success: ( success: (

View File

@ -1,3 +1,4 @@
import { Toaster } from '@/components/ui/sonner';
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
import type { BreadcrumbItem } from '@/types'; import type { BreadcrumbItem } from '@/types';
@ -11,6 +12,7 @@ export default function AppLayout({
return ( return (
<AppLayoutTemplate breadcrumbs={breadcrumbs}> <AppLayoutTemplate breadcrumbs={breadcrumbs}>
{children} {children}
<Toaster />
</AppLayoutTemplate> </AppLayoutTemplate>
); );
} }