AmirReza Jamali
e6493f5d83
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.
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { BreadcrumbItem } from "@/types/shared";
|
|
import Link from "next/link";
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[];
|
|
}
|
|
|
|
const Breadcrumb = ({ items }: BreadcrumbProps) => {
|
|
const currentPage = items[items.length - 1];
|
|
|
|
return (
|
|
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<h2 className="text-[26px] font-bold leading-[30px] text-dark dark:text-white">
|
|
{currentPage.name}
|
|
</h2>
|
|
|
|
<nav>
|
|
<ol className="flex items-center gap-2">
|
|
{items.map((item, index) => {
|
|
const isLast = index === items.length - 1;
|
|
|
|
return isLast ? (
|
|
<li key={index} className="font-medium text-primary">
|
|
{item.name}
|
|
</li>
|
|
) : (
|
|
<li key={index} className="flex items-center gap-2">
|
|
<Link
|
|
href={item.href}
|
|
className="font-medium hover:text-primary"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
<span className="text-dark dark:text-white">/</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Breadcrumb;
|