👌 IMPROVE: Refactoring /functions/randomQuote

website/components/FunctionPage/FunctionPage.js

@@ -0,0 +1,24 @@
+import { Fragment, useState } from 'react';
+import { API_URL } from '../../utils/config';
+import HeadTag from '../HeadTag';
+import FunctionTabsTop from './FunctionTabsTop';
+import FunctionComponentTop from '../FunctionComponentTop';
+
+const FunctionPage = (props) => {
+
+    const [slideIndex, setSlideIndex] = useState(0);
+
+    return (
+        <Fragment>
+            <HeadTag title={props.title} description={props.description} image={API_URL + props.image} />
+
+            <div className="container-fluid">
+                <FunctionTabsTop slideIndex={slideIndex} setSlideIndex={setSlideIndex} tabNames={props.tabNames} />
+                <FunctionComponentTop { ...props } />
+                <props.FunctionTabManager { ...props } slideIndex={slideIndex} setSlideIndex={setSlideIndex} />
+            </div>
+        </Fragment>
+    );
+}
+
+export default FunctionPage;

website/components/FunctionPage/FunctionTabs.js

@@ -0,0 +1,14 @@
+import SwipeableViews from 'react-swipeable-views';
+import '../../components/FunctionTabs/FunctionTabs.css';
+
+const FunctionTabs = (props) => {
+    return (
+        <div className="container-fluid">
+            <SwipeableViews onChangeIndex={(index) => props.setSlideIndex(index)} index={props.slideIndex} enableMouseEvents>
+                {props.children}
+            </SwipeableViews>
+        </div>
+    );
+}
+
+export default FunctionTabs;

website/components/FunctionPage/FunctionTabsTop.js

@@ -0,0 +1,24 @@
+const FunctionTabsTop = (props) => {
+    return (
+        <div className="container">
+            <div className="row justify-content-center">
+                <ul className="FunctionTabs__nav">
+                    {props.tabNames.map((tabName, index) => {
+                        return (
+                            <li key={index} className="FunctionTabs__nav-item">
+                                <a 
+                                    className={`FunctionTabs__nav-link ${(props.slideIndex === index) ? "FunctionTabs__nav-link-active" : ""}`} 
+                                    onClick={() => props.setSlideIndex(index)}
+                                >
+                                    {tabName}
+                                </a>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export default FunctionTabsTop;