Matt Aitken
6cf86d5916
* Delete v2 Stripe routes * Delete v2 billing/usage pages * Delete v2 integration pages * Delete v2 project pages * Deleted a load of components and services * Deleted a load more components, presenters and services * Deleted another 100 files or so… * Removed old v2 paths * Removed named icons from form titles * Removed more string icons * Delete NamedIcon * Fixed some type errors * Delete endpointApi * Removed v2 from core/sdk * Post merge fixes * added explicit return types * using the new sdk export without v3 * Delete old v2 file * Added explicit return types because TS was complaining… * Don’t export RuntimeEnvironmentType from two core files. Was causing TS issue * Fix for removal of NamedIcon in new route * Removed strange eslintrc rule * Use the new redis client --------- Co-authored-by: James Ritchie <james@trigger.dev>
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import type { z } from "zod";
|
|
import { Paragraph } from "./Paragraph";
|
|
import { motion } from "framer-motion";
|
|
import { cn } from "~/utils/cn";
|
|
import { ErrorIcon } from "~/assets/icons/ErrorIcon";
|
|
|
|
export function FormError({
|
|
children,
|
|
id,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
id?: string;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<>
|
|
{children && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
className={cn("flex items-start gap-0.5", className)}
|
|
>
|
|
<ErrorIcon className="h-4 w-4 shrink-0 justify-start text-rose-500" />
|
|
<Paragraph id={id} variant="extra-small" className="text-rose-500">
|
|
{children}
|
|
</Paragraph>
|
|
</motion.div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function ZodFormErrors({ errors, path }: { errors: z.ZodIssue[]; path: string[] }) {
|
|
if (errors.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const relevantErrors = errors.filter((error) => {
|
|
return error.path.join(".") === path.join(".");
|
|
});
|
|
|
|
if (relevantErrors.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="col-span-full mt-1 text-sm text-rose-600">
|
|
{relevantErrors.map((error, index) => (
|
|
<FormError key={index}>{error.message}</FormError>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|