theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Système d'onglets pour /functions/slug

Browse Source
This commit is contained in:
Divlo
2020-03-23 21:22:41 +01:00
parent 0f8c1d3569
commit 53330095be
9 changed files with 185 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
website/components/FunctionTabs/FunctionTabs.css Normal file
View File

@ -0,0 +1,39 @@
.FunctionTabs__nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid #d9e2ef;
margin-bottom: -1px;
}
.FunctionTabs__nav-item {
margin-bottom: -1px;
cursor: pointer;
}
.FunctionTabs__nav-link {
color: var(--text-color);
border: 1px solid #0c0b0b38;
border-bottom: 0px;
border-top-left-radius: .375rem;
border-top-right-radius: .375rem;
display: block;
padding: .5rem 1rem;
}
.FunctionTabs__nav-link-active {
border-color: #d9e2ef #d9e2ef #fff;
color: var(--important);
}
.FunctionTabs__nav-link:hover {
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
text-decoration: none;
}
@media (max-width: 490px) {
.FunctionTabs__nav {
flex-direction: column;
}
.FunctionTabs__nav-link {
border-color: #f1f4f8 #f1f4f8 #d9e2ef;
}
}

59
website/components/FunctionTabs/FunctionTabs.js Normal file
View File

@ -0,0 +1,59 @@
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;