feat(contact): add animated snackbar component for better user feedback

- Create new Snackbar component with Framer Motion animations
- Replace inline status messages with modern snackbar notifications
- Add success/error icons and auto-dismiss functionality
- Implement smooth slide-in/out animations with scale effects
- Add close button for manual dismissal
- Improve user experience with better visual feedback
- Support both success and error message types
- Auto-dismiss after 5 seconds with configurable duration

Author: davidagustin

src/components/Contact.tsx

@@ -2,6 +2,7 @@ import { motion } from 'framer-motion';
 import type React from 'react';
 import { useState, useEffect } from 'react';
 import emailjs from '@emailjs/browser';
+import Snackbar from './Snackbar';
 
 const Contact: React.FC = () => {
   const [formData, setFormData] = useState({
@@ -10,7 +11,11 @@ const Contact: React.FC = () => {
     message: '',
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [snackbar, setSnackbar] = useState({
+    isOpen: false,
+    message: '',
+    type: 'success' as 'success' | 'error',
+  });
 
   // Initialize EmailJS
   useEffect(() => {
@@ -26,19 +31,26 @@ const Contact: React.FC = () => {
 
     // Basic validation
     if (!formData.name.trim() || !formData.email.trim() || !formData.message.trim()) {
-      setSubmitStatus('error');
+      setSnackbar({
+        isOpen: true,
+        message: 'Please fill in all fields.',
+        type: 'error',
+      });
       return;
     }
 
     // Email validation
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(formData.email.trim())) {
-      setSubmitStatus('error');
+      setSnackbar({
+        isOpen: true,
+        message: 'Please enter a valid email address.',
+        type: 'error',
+      });
       return;
     }
 
     setIsSubmitting(true);
-    setSubmitStatus('idle');
 
     try {
       // EmailJS template parameters
@@ -61,7 +73,11 @@ const Contact: React.FC = () => {
       console.log('EmailJS result:', result);
 
       if (result.status === 200 || result.text === 'OK') {
-        setSubmitStatus('success');
+        setSnackbar({
+          isOpen: true,
+          message: 'Message sent successfully! I\'ll get back to you soon.',
+          type: 'success',
+        });
 
         // Reset form
         setFormData({
@@ -71,11 +87,19 @@ const Contact: React.FC = () => {
         });
       } else {
         console.error('EmailJS returned non-success status:', result);
-        setSubmitStatus('error');
+        setSnackbar({
+          isOpen: true,
+          message: 'Failed to send message. Please try again.',
+          type: 'error',
+        });
       }
     } catch (error) {
       console.error('Error sending email:', error);
-      setSubmitStatus('error');
+      setSnackbar({
+        isOpen: true,
+        message: 'Network error. Please check your connection and try again.',
+        type: 'error',
+      });
 
       // Log additional error details for debugging
       if (error instanceof Error) {
@@ -86,11 +110,6 @@ const Contact: React.FC = () => {
       }
     } finally {
       setIsSubmitting(false);
-      
-      // Reset status after 5 seconds
-      setTimeout(() => {
-        setSubmitStatus('idle');
-      }, 5000);
     }
   };
 
@@ -212,18 +231,14 @@ const Contact: React.FC = () => {
                   />
                 </div>
 
-                {/* Status Messages */}
-                {submitStatus === 'success' && (
-                  <div className="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
-                    ✅ Perfect! Your message has been sent successfully. I'll get back to you as soon as possible!
-                  </div>
-                )}
-                
-                {submitStatus === 'error' && (
-                  <div className="p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
-                    ❌ There was an error sending your message. Please check your internet connection and try again, or email me directly at davidsyagustin@gmail.com
-                  </div>
-                )}
+                {/* Snackbar Component */}
+                <Snackbar
+                  isOpen={snackbar.isOpen}
+                  message={snackbar.message}
+                  type={snackbar.type}
+                  onClose={() => setSnackbar({ ...snackbar, isOpen: false })}
+                  duration={5000}
+                />
 
                 <button 
                   type="submit" 

src/components/Snackbar.tsx

@@ -0,0 +1,106 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import type React from 'react';
+import { useEffect } from 'react';
+import { FaCheckCircle, FaExclamationCircle, FaTimes } from 'react-icons/fa';
+
+interface SnackbarProps {
+  isOpen: boolean;
+  message: string;
+  type: 'success' | 'error';
+  onClose: () => void;
+  duration?: number;
+}
+
+const Snackbar: React.FC<SnackbarProps> = ({
+  isOpen,
+  message,
+  type,
+  onClose,
+  duration = 5000,
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, duration, onClose]);
+
+  const getIcon = () => {
+    switch (type) {
+      case 'success':
+        return <FaCheckCircle className="text-green-500" />;
+      case 'error':
+        return <FaExclamationCircle className="text-red-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const getStyles = () => {
+    switch (type) {
+      case 'success':
+        return {
+          bg: 'bg-green-50',
+          border: 'border-green-200',
+          text: 'text-green-800',
+          icon: 'text-green-500',
+        };
+      case 'error':
+        return {
+          bg: 'bg-red-50',
+          border: 'border-red-200',
+          text: 'text-red-800',
+          icon: 'text-red-500',
+        };
+      default:
+        return {
+          bg: 'bg-gray-50',
+          border: 'border-gray-200',
+          text: 'text-gray-800',
+          icon: 'text-gray-500',
+        };
+    }
+  };
+
+  const styles = getStyles();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, y: 50, scale: 0.3 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 50, scale: 0.3 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+          }}
+          className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50"
+        >
+          <div
+            className={`flex items-center gap-3 px-6 py-4 rounded-lg shadow-lg border ${styles.bg} ${styles.border} ${styles.text} max-w-md mx-4`}
+          >
+            <div className="flex-shrink-0 text-xl">
+              {getIcon()}
+            </div>
+            <div className="flex-1 text-sm font-medium">
+              {message}
+            </div>
+            <button
+              onClick={onClose}
+              className="flex-shrink-0 p-1 rounded-full hover:bg-black/10 transition-colors"
+              aria-label="Close notification"
+            >
+              <FaTimes className="text-lg" />
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Snackbar;