reviews and review history

frontend/src/components/SuccessModal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface SuccessModalProps {
+  show: boolean;
+  onClose: () => void;
+  title?: string;
+  message: string;
+}
+
+const SuccessModal: React.FC<SuccessModalProps> = ({ 
+  show, 
+  onClose, 
+  title = "Success!",
+  message 
+}) => {
+  if (!show) return null;
+
+  return (
+    <div 
+      className="modal d-block" 
+      tabIndex={-1} 
+      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+    >
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header border-0 pb-0">
+            <div className="w-100 text-center">
+              <div 
+                className="mx-auto mb-3 d-flex align-items-center justify-content-center bg-success rounded-circle"
+                style={{ width: '60px', height: '60px' }}
+              >
+                <i className="bi bi-check-lg text-white" style={{ fontSize: '2rem' }}></i>
+              </div>
+              <h5 className="modal-title">{title}</h5>
+            </div>
+            <button 
+              type="button" 
+              className="btn-close" 
+              onClick={onClose}
+            ></button>
+          </div>
+          <div className="modal-body text-center pt-0">
+            <p className="mb-4">{message}</p>
+          </div>
+          <div className="modal-footer border-0 pt-0 justify-content-center">
+            <button 
+              type="button" 
+              className="btn btn-primary px-4"
+              onClick={onClose}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessModal;