Sonner

'use client';
import { Button } from '@/components/ui/button';
import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
import React from 'react';

export default function DemoOne() {
	const [activeType, setActiveType] = React.useState(allTypes[0]);

	return (
		<div className="relative flex min-h-screen w-full items-start justify-center">
			<Toaster />
			<div className="max-w-md space-y-5 pt-32">
				<div className="flex flex-wrap gap-2">
					{allTypes.map((type) => (
						<Button
							data-active={activeType.name === type.name}
							onClick={() => {
								type.action();
								setActiveType(type);
							}}
							key={type.name}
						>
							{type.name}
						</Button>
					))}
				</div>
				<div className="w-full h-full border p-2 rounded-md text-muted-foreground">
				<code>
					{activeType.snippet}
				</code>
				</div>
			</div>
		</div>
	);
}

const promiseCode = '`${data.name} toast has been added`';

const allTypes = [
	{
		name: 'Default',
		snippet: `toast('Event has been created')`,
		action: () => toast('Event has been created'),
	},
	{
		name: 'Description',
		snippet: `toast.message('Event has been created', {
  description: 'Monday, January 3rd at 6:00pm',
})`,
		action: () =>
			toast('Event has been created', {
				description: 'Monday, January 3rd at 6:00pm',
			}),
	},
	{
		name: 'Success',
		snippet: `toast.success('Event has been created')`,
		action: () => toast.success('Event has been created'),
	},
	{
		name: 'Info',
		snippet: `toast.info('Be at the area 10 minutes before the event time')`,
		action: () => toast.info('Be at the area 10 minutes before the event time'),
	},
	{
		name: 'Warning',
		snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
		action: () => toast.warning('Event start time cannot be earlier than 8am'),
	},
	{
		name: 'Error',
		snippet: `toast.error('Event has not been created')`,
		action: () => toast.error('Event has not been created'),
	},
	{
		name: 'Action',
		snippet: `toast('Event has been created', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo')
  },
})`,
		action: () =>
			toast.message('Event has been created', {
				action: {
					label: 'Undo',
					onClick: () => console.log('Undo'),
				},
			}),
	},
	{
		name: 'Promise',
		snippet: `const promise = () => new Promise(
		(resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000));

toast.promise(promise, {
  loading: 'Loading...',
  success: (data) => {
    return ${promiseCode};
  },
  error: 'Error',
});`,
		action: () =>
			toast.promise<{ name: string }>(
				() =>
					new Promise((resolve) => {
						setTimeout(() => {
							resolve({ name: 'Sonner' });
						}, 2000);
					}),
				{
					loading: 'Loading...',
					success: (data) => {
						return `${data.name} toast has been added`;
					},
					error: 'Error',
				},
			),
	},
	{
		name: 'Custom',
		snippet: `toast(<div>A custom toast with default styling</div>)`,
		action: () => toast(<div>A custom toast with default styling</div>, { duration: 1000000 }),
	},
];