ldc-groupe/resources/ts/back/Components/InputError.tsx

// * Packages
import { AlertCircleIcon } from "lucide-react";
import { usePage } from "@inertiajs/react";
// * Components shadcn
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
// * Other
import useTrans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

export default function InputError({
    all,
    message,
}: {
    all?: boolean;
    message?: string;
}) {
    const { errors } = usePage().props;
    const errorsTrans = useTrans("back.errors");
    let messages = {} as Array<string>;
    if (message) {
        messages = Object.values([message]);
    } else if (Object.values(errors).length && all) {
        messages = Object.values(errors);
    }
    if (messages.length) {
        return (
            <Alert
                variant="destructive"
                className={cn("text-left ", { "mb-4": all })}
            >
                <AlertCircleIcon className="h-4 w-4" />
                {all && <AlertTitle>{errorsTrans}</AlertTitle>}
                <AlertDescription>
                    {messages.map((errorMessage) => {
                        return <p key={errorMessage}>{errorMessage}</p>;
                    })}
                </AlertDescription>
            </Alert>
        );
    }
}