56 lines
1.8 KiB
TypeScript
56 lines
1.8 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/global";
|
|
|
|
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>
|
|
)
|
|
}
|