79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';
|
|
import classnames from 'classnames';
|
|
import Description from './description';
|
|
import Donation from './Donation';
|
|
import Comments from './Comments';
|
|
|
|
|
|
|
|
const CampaignTab = ({ CampaignDetails }) => {
|
|
const [activeTab, setActiveTab] = useState('1');
|
|
|
|
const toggle = tab => {
|
|
if (activeTab !== tab) setActiveTab(tab);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="wpo-campaign-details-tab">
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: activeTab === '1' })}
|
|
onClick={() => { toggle('1'); }}
|
|
>
|
|
Description
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: activeTab === '2' })}
|
|
onClick={() => { toggle('2'); }}
|
|
>
|
|
|
|
Donations
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink
|
|
className={classnames({ active: activeTab === '3' })}
|
|
onClick={() => { toggle('3'); }}
|
|
>
|
|
|
|
Comments
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
</div>
|
|
<div className="wpo-campaign-details-text">
|
|
<TabContent activeTab={activeTab}>
|
|
<TabPane tabId="1">
|
|
<Row>
|
|
<Col sm="12">
|
|
<Description CampaignDetails={CampaignDetails} />
|
|
</Col>
|
|
</Row>
|
|
</TabPane>
|
|
<TabPane tabId="2">
|
|
<Row>
|
|
<Col sm="12">
|
|
<Donation />
|
|
</Col>
|
|
</Row>
|
|
</TabPane>
|
|
<TabPane tabId="3">
|
|
<Row>
|
|
<Col sm="12">
|
|
<Comments/>
|
|
</Col>
|
|
</Row>
|
|
</TabPane>
|
|
|
|
</TabContent>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CampaignTab; |