49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ContactStatusProps {
|
|
type: 'success' | 'error';
|
|
message?: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose }) => {
|
|
const isSuccess = type === 'success';
|
|
|
|
return (
|
|
<div className={`status-container ${type}`}>
|
|
<div className="status-card">
|
|
<div className="bubbles">
|
|
{[...Array(12)].map((_, i) => (
|
|
<span key={i} className={`bubble bubble-${i + 1}`}></span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="icon-wrapper">
|
|
<div className="icon-circle">
|
|
{isSuccess ? (
|
|
<i className="fa-solid fa-check"></i>
|
|
) : (
|
|
<i className="fa-solid fa-xmark"></i>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="status-title">
|
|
{isSuccess ? 'Success' : 'Oooops'}
|
|
</h3>
|
|
|
|
<p className="status-message">
|
|
{message || (isSuccess ? 'Your message has been sent successfully.' : 'Something went wrong. Please try again.')}
|
|
</p>
|
|
|
|
<button className="status-btn" onClick={onClose}>
|
|
{isSuccess ? 'Continue' : 'Try again'}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactStatus;
|