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

frontend: FunctionTabs en plusieurs components

Browse Source
This commit is contained in:
Divlo
2020-03-24 09:54:50 +01:00
parent 53330095be
commit b479e1501f
12 changed files with 114 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/components/FunctionCard/FunctionCard.js
View File

@ -2,7 +2,7 @@ import Link from 'next/link';
import { useState, forwardRef } from 'react';
import Loader from '../Loader';
import './FunctionCard.css';
import { API_URL } from '../../config/config';
import { API_URL } from '../../utils/config';
const FunctionCard = forwardRef((props, ref) => {

21
website/components/FunctionComponentTop.js Normal file
View File

@ -0,0 +1,21 @@
import Link from 'next/link';
const FunctionComponentTop = (props) => (
<div className="container-fluid">
<div className="row justify-content-center text-center">
<div className="FunctionComponent__top col-24">
<img src={props.API_URL + props.image} alt={props.title} />
<h1 className="FunctionComponent__title title-important">{props.title}</h1>
<p className="FunctionComponent__description">{props.description}</p>
<div className="FunctionCard__info">
<Link href={`/functions?categoryId=${props.categorieId}`}>
<a className="FunctionCard__category" style={{ backgroundColor: props.categorie.color, color: 'inherit' }}>{props.categorie.name}</a>
</Link>
<p className="FunctionCard__publication-date">{props.publicationDate}</p>
</div>
</div>
</div>
</div>
);
export default FunctionComponentTop;

2
website/components/FunctionTabs/FunctionTabs.css
View File

@ -6,6 +6,7 @@
list-style: none;
border-bottom: 1px solid #d9e2ef;
margin-bottom: -1px;
margin-top: 30px;
}
.FunctionTabs__nav-item {
margin-bottom: -1px;
@ -19,6 +20,7 @@
border-top-right-radius: .375rem;
display: block;
padding: .5rem 1rem;
transition: .2s;
}
.FunctionTabs__nav-link-active {
border-color: #d9e2ef #d9e2ef #fff;

56
website/components/FunctionTabs/FunctionTabs.js
View File

@ -1,58 +1,18 @@
import { Fragment, useState } from 'react';
import { useContext } from 'react';
import { FunctionTabsContext } from '../../contexts/FunctionTabsContext';
import SwipeableViews from 'react-swipeable-views';
import './FunctionTabs.css';
function FunctionTabs(props) {
const [slideIndex, setSlideIndex] = useState(0);
const { setSlideIndex, slideIndex } = useContext(FunctionTabsContext);
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>
<div className="container-fluid">
<SwipeableViews onChangeIndex={(index) => setSlideIndex(index)} index={slideIndex} enableMouseEvents>
{props.children}
</SwipeableViews>
</div>
);
}

45
website/components/FunctionTabs/FunctionTabsTop.js Normal file
View File

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