Sonner Custom Color Toast

"use client";

import { useEffect } from "react";
import ToastComponent from "@/components/ui/toast7";
import { Toaster, toast } from "sonner";

export default function Default() {
  useEffect(() => {
    const id = setTimeout(() => {
      toast.success("Password changed successfully", {
        style: {
          "--normal-bg": "#0284c7",
          "--normal-text": "#ffffff",
          "--normal-border": "#0284c7",
          "--success-bg": "#0284c7",
          "--success-text": "#ffffff",
          "--success-border": "#0284c7",
        } as React.CSSProperties,
        duration: 100000,
      });
    }, 400);
    return () => clearTimeout(id);
  }, []);

  return (
    <div className="relative flex min-h-[240px] w-full items-center justify-center bg-background text-foreground">
      <ToastComponent />
      <Toaster position="bottom-right" />
    </div>
  );
}