update

gnx-react/components/pages/support/SupportCenterContent.tsx

@@ -1,53 +1,165 @@
 "use client";
-import { useState } from 'react';
+import { useEffect } from 'react';
 import CreateTicketForm from './CreateTicketForm';
 import KnowledgeBase from './KnowledgeBase';
 import TicketStatusCheck from './TicketStatusCheck';
 
-type TabType = 'create' | 'knowledge' | 'status';
+type ModalType = 'create' | 'knowledge' | 'status' | null;
 
-const SupportCenterContent = () => {
-  const [activeTab, setActiveTab] = useState<TabType>('create');
+interface SupportCenterContentProps {
+  activeModal: ModalType;
+  onClose: () => void;
+}
+
+const SupportCenterContent = ({ activeModal, onClose }: SupportCenterContentProps) => {
+  // Close modal on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && activeModal) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [activeModal, onClose]);
+
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (activeModal) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [activeModal]);
+
+  if (!activeModal) return null;
 
   return (
-    <section className="support-center-content section-padding">
-      <div className="container">
-        <div className="row">
-          <div className="col-12">
-            {/* Tab Navigation */}
-            <div className="support-tabs">
-              <ul className="support-tabs__nav">
-                <li className={activeTab === 'create' ? 'active' : ''}>
-                  <button onClick={() => setActiveTab('create')}>
-                    <i className="fa-solid fa-ticket me-2"></i>
-                    Submit a Ticket
-                  </button>
-                </li>
-                <li className={activeTab === 'knowledge' ? 'active' : ''}>
-                  <button onClick={() => setActiveTab('knowledge')}>
-                    <i className="fa-solid fa-book me-2"></i>
-                    Knowledge Base
-                  </button>
-                </li>
-                <li className={activeTab === 'status' ? 'active' : ''}>
-                  <button onClick={() => setActiveTab('status')}>
-                    <i className="fa-solid fa-search me-2"></i>
-                    Check Ticket Status
-                  </button>
-                </li>
-              </ul>
+    <>
+      {/* Modal Overlay */}
+      <div 
+        className="support-modal-overlay" 
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.7)',
+          zIndex: 9998,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '20px',
+          backdropFilter: 'blur(5px)',
+        }}
+      >
+        {/* Modal Content */}
+        <div 
+          className="support-modal-content"
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            backgroundColor: '#fff',
+            borderRadius: '12px',
+            maxWidth: '1000px',
+            width: '100%',
+            maxHeight: '90vh',
+            overflow: 'auto',
+            position: 'relative',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            animation: 'modalSlideIn 0.3s ease-out',
+          }}
+        >
+          {/* Close Button */}
+          <button
+            onClick={onClose}
+            className="support-modal-close"
+            aria-label="Close modal"
+            style={{
+              position: 'sticky',
+              top: '20px',
+              right: '20px',
+              float: 'right',
+              background: '#f3f4f6',
+              border: 'none',
+              borderRadius: '50%',
+              width: '40px',
+              height: '40px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              fontSize: '20px',
+              color: '#374151',
+              transition: 'all 0.2s',
+              zIndex: 10,
+              marginBottom: '-40px',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = '#e5e7eb';
+              e.currentTarget.style.transform = 'scale(1.1)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = '#f3f4f6';
+              e.currentTarget.style.transform = 'scale(1)';
+            }}
+          >
+            <i className="fa-solid fa-times"></i>
+          </button>
 
-              {/* Tab Content */}
-              <div className="support-tabs__content">
-                {activeTab === 'create' && <CreateTicketForm />}
-                {activeTab === 'knowledge' && <KnowledgeBase />}
-                {activeTab === 'status' && <TicketStatusCheck />}
-              </div>
-            </div>
+          {/* Modal Body */}
+          <div className="support-modal-body" style={{ padding: '40px' }}>
+            {activeModal === 'create' && <CreateTicketForm />}
+            {activeModal === 'knowledge' && <KnowledgeBase />}
+            {activeModal === 'status' && <TicketStatusCheck />}
           </div>
         </div>
       </div>
-    </section>
+
+      {/* Modal Animation Keyframes */}
+      <style jsx>{`
+        @keyframes modalSlideIn {
+          from {
+            opacity: 0;
+            transform: translateY(-20px) scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+
+        .support-modal-content::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        .support-modal-content::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 10px;
+        }
+
+        .support-modal-content::-webkit-scrollbar-thumb {
+          background: #888;
+          border-radius: 10px;
+        }
+
+        .support-modal-content::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+
+        @media (max-width: 768px) {
+          .support-modal-body {
+            padding: 20px !important;
+          }
+        }
+      `}</style>
+    </>
   );
 };