feat(toast): add example of promise toast and add shake animation

[juliusmarminge]

Thought I'd add an example of a promise-based toaster.

Adds a shake animation if a toast is updated to destructive:

https://user-images.githubusercontent.com/51714798/232233219-2fc00303-2a31-4546-a4d9-17b790f2dfc4.mp4

[vercel[bot]]

@juliusmarminge is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)			Apr 15, 2023 3:52pm

[juliusmarminge]

cc @shadcn is this something you're interested in?

[shadcn]

@juliusmarminge Sorry been busy with the update. I can come back to this now.

This looks good. Let's think a bit about the API. I'm wondering if we could do something like:

const progress = toast({
  title: "Sending...",
  description: "Your message is being sent.",
})

toast.animate() // Using .animate for lack of better term here.

Then based on some data-animating props, we could add animation via Tailwind.

This way we can support all the default tailwind animation classes, animate-pulse, animate-bounce..etc and also allow custom animations as well.

What do you think?

[Hidde-Heijnen]

@juliusmarminge is this something y'all are still working on?

[juliusmarminge]

I can pick it up after exams are over. But if you're down to continue now feel free!

[juliusmarminge]

not needed now with sonner i guess