56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"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;
|
|
|