import { h } from "preact"
import { ToastAction, Toaster, useToast } from "@/comps/echo/toast"
 
export const DismissiveDemo = () => {
    const { toast } = useToast()
 
    return <div class="w-[400px] h-[300px] bg-gray-200 justify-start items-start pl-10 pt-10">
        <button
            class="w-[200px] mb-4"
            onClick={() => {
                toast({
                    variant: "success",
                    title: "Settings saved",
                    description: "All changes written to disk",
                    action: <ToastAction onClick={() => console.log("Revert clicked")}>Revert</ToastAction>,
                    duration: 3000 // sticky unless specified
                })
            }}
        >Save Settings</button>
        <Toaster />{/* Toaster should be put in your root comp */}
    </div>
}

import { h } from "preact"
import { Toaster, useToast } from "@/comps/echo/toast"
 
export const DestructiveDemo = () => {
    const { toast } = useToast()
 
    return <div class="w-[400px] h-[300px] bg-gray-200 justify-start items-start pl-10 pt-10">
        <button
            class="w-[200px] bg-red-600 hover:bg-red-500"
            onClick={() => {
                toast({
                    variant: "destructive",
                    title: "Oh no! Something's not right",
                    description: "There was an error processing your request"
                })
            }}
        >Error</button>
        {/* Toaster should be put in your root comp */}
        <Toaster />
    </div>
}