45 lines
2.0 KiB
JavaScript
45 lines
2.0 KiB
JavaScript
|
import { useContext } from 'react';
|
|||
|
|
import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
|
|||
|
|
import '../FunctionCard/FunctionCard.css';
|
|||
|
|
|
|||
|
|
const FunctionTabsTop = (props) => {
|
|||
|
|
|
|||
|
|
const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default FunctionTabsTop;
|