update

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

@@ -0,0 +1,55 @@
+"use client";
+import { useState } from 'react';
+import CreateTicketForm from './CreateTicketForm';
+import KnowledgeBase from './KnowledgeBase';
+import TicketStatusCheck from './TicketStatusCheck';
+
+type TabType = 'create' | 'knowledge' | 'status';
+
+const SupportCenterContent = () => {
+  const [activeTab, setActiveTab] = useState<TabType>('create');
+
+  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>
+
+              {/* Tab Content */}
+              <div className="support-tabs__content">
+                {activeTab === 'create' && <CreateTicketForm />}
+                {activeTab === 'knowledge' && <KnowledgeBase />}
+                {activeTab === 'status' && <TicketStatusCheck />}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SupportCenterContent;
+