70 lines
2 KiB
TypeScript
70 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";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type AddNewFieldBtnProps = {
|
|
className: string;
|
|
array: ConfigInternalField[] | DynamicInternalField[] | undefined;
|
|
variant?: VariantProps<typeof buttonVariants>["variant"];
|
|
limitMax?: number | undefined;
|
|
onClick: () => void;
|
|
};
|
|
|
|
// Get a button with some informations.
|
|
export default function AddNewFieldBtn({
|
|
className = "",
|
|
array = [],
|
|
variant = "default",
|
|
limitMax,
|
|
onClick,
|
|
}: AddNewFieldBtnProps) {
|
|
// Translations.
|
|
const transNoMoreChildren = useTrans(
|
|
"uwil-dynamic-pages::trans.no_more_children",
|
|
);
|
|
const transNewField = useTrans("uwil-dynamic-pages::trans.new_field");
|
|
const transEmptyWarning = useTrans("uwil-dynamic-pages::trans.empty_warning");
|
|
const transEntriesCount = useTrans(
|
|
"uwil-dynamic-pages::trans.entries_count",
|
|
{
|
|
params: {
|
|
length: String(array?.length ?? 0),
|
|
},
|
|
choice: (array?.length ?? 0) > 1 ? 2 : 1,
|
|
},
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col lg:flex-row justify-center lg:justify-between items-center",
|
|
className,
|
|
)}
|
|
>
|
|
{/* 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>
|
|
);
|
|
}
|