submit-button.tsx

Usage

If the user edits a ticket, there will be a ticket passed as parameter to the TicketUpsertForm so the button will display ‘Edit’ else ‘Create’.

<SubmitButton label={ticket ? "Edit" : "Create"} />

---

Implementation

src/components/form/submit-button.tsx

"use client";
 
import { LucideLoaderCircle } from "lucide-react";
import { useFormStatus } from "react-dom";
import { Button } from "../ui/button";
 
type SubmitButtonProps = {
  label: string;
};
 
const SubmitButton = ({ label }: SubmitButtonProps) => {
  const { pending } = useFormStatus();
 
  return (
    <Button disabled={pending} type="submit">
      {pending && <LucideLoaderCircle className="h-4 w-4 animate-spin" />}
      {label}
    </Button>
  );
};
 
export { SubmitButton };