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 40 41 42 43 44 45 46 47 48 49 | import { motion } from 'framer-motion';
interface ModalActionsProps {
onClose: () => void;
buttonLabel: string;
loading: boolean;
showInput?: boolean;
}
export function ModalActions({
onClose,
buttonLabel,
loading,
showInput = true,
}: ModalActionsProps) {
return (
<div className="flex justify-end gap-2 pt-4 border-t border-gray-100">
{/* Cancel button */}
<motion.button
type="button"
whileHover={{ y: -1 }}
whileTap={{ scale: 0.97 }}
onClick={onClose}
className="rounded-full px-4 py-1.5 text-sm font-medium text-gray-600
hover:text-gray-800 hover:bg-gray-100
transition focus:outline-none"
>
Cancel
</motion.button>
{/* Submit button */}
<motion.button
type="submit"
data-testid="project-submit"
whileHover={{ y: -1 }}
whileTap={{ scale: 0.97 }}
disabled={loading}
className={`rounded-full px-5 py-1.5 text-sm font-semibold text-white transition-all shadow-sm focus:outline-none ${
showInput
? 'bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800'
: 'bg-rose-600 hover:bg-rose-700 active:bg-rose-800'
} focus:ring-2 focus:ring-indigo-400 disabled:opacity-70`}
>
{loading ? `${buttonLabel}ing...` : buttonLabel}
</motion.button>
</div>
);
}
|