feat(form): add loading state and replace custom switch component
This commit introduces a loading state for form submissions and replaces the custom switch component with a third-party library for improved user experience and maintainability. - Adds `react-switch` as a dependency to replace the custom-built switch component, providing a more robust and feature-rich solution. - Implements a loading indicator on form submission buttons and in the confirmation modal by utilizing the `useIsMutating` hook from TanStack Query. This provides clear visual feedback to the user during asynchronous operations. - Creates a reusable `FormFooter` component to encapsulate the submit and cancel buttons, centralizing the form submission logic and loading state. - Refactors the company create/edit forms to use the new `FormFooter` and `react-switch` components. - Moves the `BreadcrumbItem` type to a shared types file for better code organization.
This commit is contained in:
@@ -30,18 +30,21 @@ const Status = ({ status, children }: IProps) => {
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn("rounded-2xl px-3 py-1.5 text-sm font-medium capitalize", {
|
||||
"bg-green text-white": greens.includes(status),
|
||||
"bg-orange-light text-white": oranges.includes(status),
|
||||
"bg-error text-white": reds.includes(status),
|
||||
"bg-blue text-white": blues.includes(status),
|
||||
"bg-gray-3 text-gray-7": grays.includes(status),
|
||||
"bg-yellow-light text-yellow-dark-2": yellows.includes(status),
|
||||
"bg-green-light-6 text-green-dark": status === "new",
|
||||
"bg-blue-light-5 text-blue-dark": status === "info",
|
||||
"bg-error-light-6 text-error-dark": status === "urgent",
|
||||
"bg-primary text-white": status === "featured",
|
||||
})}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-2xl px-3 py-1.5 text-center text-sm font-medium capitalize",
|
||||
{
|
||||
"bg-green text-white": greens.includes(status),
|
||||
"bg-orange-light text-white": oranges.includes(status),
|
||||
"bg-error text-white": reds.includes(status),
|
||||
"bg-blue text-white": blues.includes(status),
|
||||
"bg-gray-3 text-gray-7": grays.includes(status),
|
||||
"bg-yellow-light text-yellow-dark-2": yellows.includes(status),
|
||||
"bg-green-light-6 text-green-dark": status === "new",
|
||||
"bg-blue-light-5 text-blue-dark": status === "info",
|
||||
"bg-error-light-6 text-error-dark": status === "urgent",
|
||||
"bg-primary text-white": status === "featured",
|
||||
},
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user