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:
parent
5c1ef6a7b0
commit
46644428fc
@ -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>
|
||||||
|
|||||||
7
resources/js/components/flash-toast.tsx
Normal file
7
resources/js/components/flash-toast.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { useFlashToast } from '@/hooks/use-flash-toast';
|
||||||
|
|
||||||
|
export function FlashToast() {
|
||||||
|
useFlashToast();
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@ -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: (
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user