frontend: FunctionTabs en plusieurs components
This commit is contained in:
parent
53330095be
commit
b479e1501f
@ -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
21
website/components/FunctionComponentTop.js
Normal 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;
|
@ -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;
|
||||
|
@ -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
45
website/components/FunctionTabs/FunctionTabsTop.js
Normal 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;
|
16
website/contexts/FunctionTabsContext.js
Normal file
16
website/contexts/FunctionTabsContext.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { createContext, useState } from 'react';
|
||||
|
||||
export const FunctionTabsContext = createContext();
|
||||
|
||||
function FunctionTabsContextProvider(props) {
|
||||
|
||||
const [slideIndex, setSlideIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<FunctionTabsContext.Provider value={{ slideIndex, setSlideIndex }}>
|
||||
{props.children}
|
||||
</FunctionTabsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunctionTabsContextProvider;
|
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import api from '../config/api';
|
||||
import api from '../utils/api';
|
||||
|
||||
/**
|
||||
* @param {String} url
|
||||
|
@ -1,53 +1,36 @@
|
||||
import { Fragment } from 'react';
|
||||
import Link from 'next/link';
|
||||
import FunctionTabsContextProvider from '../../contexts/FunctionTabsContext';
|
||||
import HeadTag from '../../components/HeadTag';
|
||||
import FunctionComponentTop from '../../components/FunctionComponentTop';
|
||||
import FunctionTabsTop from '../../components/FunctionTabs/FunctionTabsTop';
|
||||
import FunctionTabs from '../../components/FunctionTabs/FunctionTabs';
|
||||
import redirect from '../../utils/redirect';
|
||||
import api from '../../config/api';
|
||||
import { API_URL } from '../../config/config';
|
||||
import api from '../../utils/api';
|
||||
import { API_URL } from '../../utils/config';
|
||||
import '../../public/css/pages/FunctionComponent.css';
|
||||
|
||||
const FunctionComponent = (props) => {
|
||||
console.log(props);
|
||||
|
||||
// Constantes
|
||||
const createdAt = new Date(props.createdAt);
|
||||
const publicationDate = `${('0'+createdAt.getDate()).slice(-2)}/${('0'+(createdAt.getMonth()+1)).slice(-2)}/${createdAt.getFullYear()}`;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<FunctionTabsContextProvider>
|
||||
<HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
|
||||
|
||||
<div className="container-fluid">
|
||||
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center text-center">
|
||||
<div className="FunctionComponent__top col-24">
|
||||
<img src={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">{publicationDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FunctionTabsTop type={props.type} />
|
||||
<FunctionComponentTop { ...props } API_URL={API_URL} publicationDate={publicationDate} />
|
||||
|
||||
<div className="container-fluid">
|
||||
<div className="row justify-content-center">
|
||||
<FunctionTabs type={props.type}>
|
||||
<div>Slide 1</div>
|
||||
<div>Slide 2</div>
|
||||
<div>Slide 3</div>
|
||||
</FunctionTabs>
|
||||
</div>
|
||||
</div>
|
||||
<FunctionTabs type={props.type}>
|
||||
<div className="FunctionComponent__slide text-center">Slide 1</div>
|
||||
<div className="FunctionComponent__slide text-center">Slide 2</div>
|
||||
<div className="FunctionComponent__slide text-center">Slide 3</div>
|
||||
</FunctionTabs>
|
||||
|
||||
</div>
|
||||
</Fragment>
|
||||
</FunctionTabsContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -4,7 +4,7 @@ import HeadTag from '../../components/HeadTag';
|
||||
import FunctionCard from '../../components/FunctionCard/FunctionCard';
|
||||
import Loader from '../../components/Loader';
|
||||
import '../../public/css/pages/functions.css';
|
||||
import api from '../../config/api';
|
||||
import api from '../../utils/api';
|
||||
import useAPI from '../../hooks/useAPI';
|
||||
|
||||
const Functions = () => {
|
||||
@ -13,7 +13,7 @@ const Functions = () => {
|
||||
|
||||
// State de recherche et de catégories
|
||||
const [, categories] = useAPI('/categories');
|
||||
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: "0" });
|
||||
const [inputSearch, setInputSearch] = useState({ search: "", selectedCategory: categoryId || "0" });
|
||||
|
||||
// State pour afficher les fonctions
|
||||
const [functionsData, setFunctionsData] = useState({ hasMore: true, rows: [] });
|
||||
|
@ -7,7 +7,7 @@
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
margin-top: 50px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.FunctionComponent__title {
|
||||
margin: 0;
|
||||
@ -15,4 +15,7 @@
|
||||
.FunctionComponent__description {
|
||||
word-break: break-all;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.FunctionComponent__slide {
|
||||
margin-top: 30px;
|
||||
}
|
Reference in New Issue
Block a user