An idea to put view button inside toast as an immediately action

src/components/forms/update-product-form.tsx

@@ -35,6 +35,7 @@ import {
 import { Textarea } from "@/components/ui/textarea"
 import { FileDialog } from "@/components/file-dialog"
 import { Icons } from "@/components/icons"
+import { ToastWithButton } from "@/components/toast-with-button"
 import {
   checkProductAction,
   deleteProductAction,
@@ -89,7 +90,7 @@ export function UpdateProductForm({ product }: UpdateProductFormProps) {
   const subcategories = getSubcategories(form.watch("category"))
 
   function onSubmit(data: Inputs) {
-    console.log(data)
+    // console.log(data)
 
     startTransition(async () => {
       try {
@@ -119,7 +120,17 @@ export function UpdateProductForm({ product }: UpdateProductFormProps) {
           images: images ?? product.images,
         })
 
-        toast.success("Product updated successfully.")
+        const handleToastAction = () => {
+          router.push(`/product/${product.storeId}`)
+          toast.dismiss(`update-product-success-${product.id}`)
+        }
+
+        toast(
+          <ToastWithButton onClick={handleToastAction}>View</ToastWithButton>,
+          {
+            id: `update-product-success-${product.id}`,
+          }
+        )
         setFiles(null)
       } catch (error) {
         error instanceof Error

src/components/toast-with-button.tsx

@@ -0,0 +1,46 @@
+import type { ButtonHTMLAttributes } from "react"
+
+import { Button } from "@/components/ui/button"
+
+export function ToastWithButton({
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <div className="flex w-full items-center">
+      <div className="flex flex-1 items-center">
+        <SonnerSuccessIcon />
+        Product updated successfully.
+      </div>
+      <Button
+        role="button"
+        aria-label="View product"
+        size="sm"
+        className="h-6"
+        {...props}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+export const SonnerSuccessIcon = () => {
+  return (
+    <div className="mr-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        height="20"
+        width="20"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </div>
+  )
+}