Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import React from 'react';
import { motion } from 'framer-motion';
interface ModalFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
title: string;
children: React.ReactNode;
'data-testid'?: string;
}
export function ModalForm({
title,
children,
'data-testid': testId,
onSubmit,
}: ModalFormProps) {
return (
<motion.form
noValidate
data-testid={testId}
initial={{ opacity: 0, scale: 0.92, y: 15 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 15 }}
transition={{ duration: 0.25, ease: 'easeOut' }}
onSubmit={onSubmit}
className="relative bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-2xl p-8 shadow-xl w-[420px] space-y-6"
>
{/* ───────── HEADER ───────── */}
<div className="flex flex-col items-start">
<h2 className="text-[22px] font-semibold text-gray-900 tracking-tight">
{title}
</h2>
<div className="w-10 border-t-2 border-indigo-500 mt-2" />
</div>
{children}
</motion.form>
);
}
|