59 lines
2 KiB
TypeScript
59 lines
2 KiB
TypeScript
// * Packages
|
|
import { PlusIcon } from "lucide-react";
|
|
import { VariantProps } from "class-variance-authority";
|
|
// * Components shadcn
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
// * Other
|
|
import useTrans from "@/hooks/use-translations";
|
|
import {
|
|
ConfigInternalField,
|
|
DynamicInternalField,
|
|
} from "@/back/types/dynamic-pages";
|
|
|
|
type AddNewFieldBtnProps = {
|
|
array: ConfigInternalField[] | DynamicInternalField[] | undefined;
|
|
variant?: VariantProps<typeof buttonVariants>["variant"];
|
|
limitMax?: number | undefined;
|
|
onClick: () => void;
|
|
};
|
|
|
|
// Get a button with some informations.
|
|
export default function AddNewFieldBtn({
|
|
array = [],
|
|
variant = "default",
|
|
limitMax,
|
|
onClick,
|
|
}: AddNewFieldBtnProps) {
|
|
// Translations.
|
|
const transNoMoreChildren = useTrans("back.no_more_children");
|
|
const transNewField = useTrans("back.new_field");
|
|
const transEmptyWarning = useTrans("back.empty_warning");
|
|
const transEntriesCount = useTrans("back.entries_count", {
|
|
params: {
|
|
length: String(array?.length ?? 0),
|
|
},
|
|
choice: (array?.length ?? 0) > 1 ? 2 : 1,
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col lg:flex-row justify-center lg:justify-between items-center">
|
|
{/* Check if the limit is achieved */}
|
|
{limitMax && array.length >= limitMax ? (
|
|
<p className="text-sm text-muted-foreground text-center">
|
|
{transNoMoreChildren}
|
|
</p>
|
|
) : (
|
|
<Button type="button" variant={variant} onClick={onClick}>
|
|
<PlusIcon className="w-4 h-4 m-auto" />
|
|
{transNewField}
|
|
</Button>
|
|
)}
|
|
{/* Indicate the current number of elements. */}
|
|
<p className="text-sm text-muted-foreground text-center my-2 xl:my-0">
|
|
{(array?.length ?? 0) > 0
|
|
? transEntriesCount
|
|
: transEmptyWarning}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|