45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { CreateRecipeFormEntries } from "../../pages/Create";
|
|
|
|
interface ValidationErrorListProps {
|
|
validation: CreateRecipeFormEntries;
|
|
}
|
|
|
|
const MESSAGES: Record<keyof CreateRecipeFormEntries, string> = {
|
|
title: "Invalid title provided.",
|
|
description: "Invalid description provided.",
|
|
prepTime: "Invalid preparation time provided.",
|
|
cookTime: "Invalid cook time provided.",
|
|
servingSize: "Invalid serving size provided.",
|
|
category: "Invalid category selected.",
|
|
difficulty: "Invalid difficulty selected.",
|
|
ingredients: "Invalid ingredients provided.",
|
|
instructions: "Invalid instructions provided.",
|
|
}
|
|
|
|
export default function ValidationErrorList({ validation }: ValidationErrorListProps) {
|
|
return (
|
|
<div className="my-2">
|
|
{Object.entries(validation)
|
|
.filter(([, isValid]) => !isValid)
|
|
.map(([name]) => {
|
|
const key = name as keyof CreateRecipeFormEntries;
|
|
return (
|
|
<p key={name} className="text-sm text-red-500">
|
|
{MESSAGES[key]}
|
|
</p>
|
|
);
|
|
})}
|
|
{validation.ingredients.filter(x => !x.valid).length > 0 && (
|
|
<p className="text-sm text-red-500">
|
|
{MESSAGES.ingredients}
|
|
</p>
|
|
)}
|
|
{validation.instructions.filter(x => !x.valid).length > 0 && (
|
|
<p className="text-sm text-red-500">
|
|
{MESSAGES.instructions}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|