Can create new blogs

frontend/components/contact.tsx

@@ -1,12 +1,18 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import useApiMutation from "@/hooks/use-api";
 import { useToast } from "@/hooks/use-toast";
-import { Loader2 } from "lucide-react";
+import { CircleCheckIcon, CircleXIcon, Loader2, SendIcon } from "lucide-react";
 import { useState } from "react";
+import {
+	ActionButton,
+	ActionButtonDefault,
+	ActionButtonError,
+	ActionButtonLoading,
+	ActionButtonSuccess,
+} from "./action-button";
 
 interface FormData {
 	firstname: string;
@@ -159,26 +165,27 @@ const Contact = () => {
 								required
 							/>
 						</div>
-						<Button
-							disabled={
-								isLoading || isSuccess || error !== undefined
-							}
-							type="submit"
-							className={`w-full transition-all ease-in-out ${isSuccess ? "bg-green-800" : error ? "bg-red-800" : ""}`}
+						<ActionButton
+							isLoading={isLoading}
+							isSuccess={isSuccess}
+							error={error}
 						>
-							{isSuccess ? (
-								<>Message envoyé</>
-							) : error ? (
-								<>Échec de l'envoie du mail.</>
-							) : (
-								<>
-									{isLoading && (
-										<Loader2 className="animate-spin" />
-									)}
-									Envoyer
-								</>
-							)}
-						</Button>
+							<ActionButtonSuccess className="gap-2">
+								<CircleCheckIcon className="animate-pulse" />
+								Message envoyé
+							</ActionButtonSuccess>
+							<ActionButtonLoading className="gap-2">
+								<Loader2 className="animate-spin" />{" "}
+								Chargement...
+							</ActionButtonLoading>
+							<ActionButtonError className="gap-2">
+								<CircleXIcon className="animate-pulse" />
+								Une erreur est survenue
+							</ActionButtonError>
+							<ActionButtonDefault className="gap-2">
+								<SendIcon /> Envoyer
+							</ActionButtonDefault>
+						</ActionButton>
 					</form>
 				</div>
 			</div>