59 lines
2.5 KiB
JavaScript
59 lines
2.5 KiB
JavaScript
|
import { Fragment, useState } from 'react';
|
|||
|
|
import SwipeableViews from 'react-swipeable-views';
|
|||
|
|
import './FunctionTabs.css';
|
|||
|
|
|
|||
|
|
function FunctionTabs(props) {
|
|||
|
|
|
|||
|
|
const [slideIndex, setSlideIndex] = useState(0);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Fragment>
|
|||
|
|
|
|||
|
|
{/* Tabs */}
|
|||
|
|
<div className="container">
|
|||
|
|
<div className="row justify-content-center">
|
|||
|
|
<ul className="FunctionTabs__nav">
|
|||
|
|
{(props.type !== 'article') &&
|
|||
|
|
<li className="FunctionTabs__nav-item">
|
|||
|
|
<a
|
|||
|
|
className={`FunctionTabs__nav-link ${(slideIndex === 0) ? "FunctionTabs__nav-link-active" : ""}`}
|
|||
|
|
onClick={() => setSlideIndex(0)}
|
|||
|
|
>
|
|||
|
|
⚙️ Utilisation
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
}
|
|||
|
|
<li className="FunctionTabs__nav-item">
|
|||
|
|
<a
|
|||
|
|
className={`FunctionTabs__nav-link ${((slideIndex === 1 && props.type !== 'article') || (props.type === 'article' && slideIndex === 0)) ? "FunctionTabs__nav-link-active" : ""}`}
|
|||
|
|
onClick={() => setSlideIndex((props.type === 'article') ? 0 : 1)}
|
|||
|
|
>
|
|||
|
|
📝 Article
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li className="FunctionTabs__nav-item">
|
|||
|
|
<a
|
|||
|
|
className={`FunctionTabs__nav-link ${((slideIndex === 2 && props.type !== 'article') || (props.type === 'article' && slideIndex === 1)) ? "FunctionTabs__nav-link-active" : ""}`}
|
|||
|
|
onClick={() => setSlideIndex((props.type === 'article') ? 1 : 2)}
|
|||
|
|
>
|
|||
|
|
📬 Commentaires
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Tabs content */}
|
|||
|
|
<div className="container-fluid">
|
|||
|
|
<div className="row justify-content-center">
|
|||
|
|
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
|
|||
|
|
{props.children}
|
|||
|
|
</SwipeableViews>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</Fragment>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default FunctionTabs;
|