Temp

public/index.html

@@ -7,6 +7,7 @@
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,400i,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,400i,700">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Code:400,500,600&display=swap">
+ <link href="https://fonts.googleapis.com/css?family=Neucha&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" />

src/App.js

@@ -10,6 +10,11 @@ const Header = lazy(() => import('./components/header'));
 const Nav = lazy(() => import('./components/nav'));
 const Home = lazy(() => import('./container/Home'));
 const MapMethod = lazy(() => import('./container/Map'));
+const FindMethod = lazy(() => import('./container/Find'));
+const FindIndexMethod = lazy(() => import('./container/FindIndex'));
+const ReduceMethod = lazy(() => import('./container/Reduce'));
+const FilterMethod = lazy(() => import('./container/Filter'));
+const SortMethod = lazy(() => import('./container/Sort'));
 
 function App(props) {
 const [theme, handleMode] = useState(
@@ -37,6 +42,11 @@ function App(props) {
 <Switch>
 <Route exact path='/' component={Home} />
 <Route path='/map' component={MapMethod} />
+<Route path='/find' component={FindMethod} />
+<Route path='/findindex' component={FindIndexMethod} />
+<Route path='/reduce' component={ReduceMethod} />
+<Route path='/filter' component={FilterMethod} />
+<Route path='/sort' component={SortMethod} />
 </Switch>
 </div>
 </Suspense>

src/components/Blocks.js

@@ -5,6 +5,7 @@ const BlockStyle = style.div`
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: ${props => props.marginTop};
+ position: relative;
  .box{
  position: relative;
  display: flex;
@@ -22,6 +23,11 @@ const BlockStyle = style.div`
  &:nth-child(3n){
  background-color: #989898;
  }
+ & > span{
+ position: absolute;
+ bottom: 1px;
+ font-family: 'Roboto';
+ }
  }
 `;
 

src/components/nav/index.js

@@ -11,7 +11,14 @@ function Nav(props) {
 const [showMenu, handleMenu] = useToggle();
 const navRef = useRef(null);
 const options = [
-{ value: 'filter', label: 'Filter Method' },
+{
+value: 'filter',
+label: (
+<Link to='/filter' className='linkRouter'>
+Filter Method
+</Link>
+)
+},
 {
 value: 'map',
 label: (
@@ -20,9 +27,38 @@ function Nav(props) {
 </Link>
 )
 },
-{ value: 'reduce', label: 'Reduce Method' },
-{ value: 'find', label: 'Find Method' },
-{ value: 'findIndex', label: 'Find-Index Method' }
+{
+value: 'find',
+label: (
+<Link to='/find' className='linkRouter'>
+Find Method
+</Link>
+)
+},
+{
+value: 'findIndex',
+label: (
+<Link to='/findindex' className='linkRouter'>
+Find-Index Method
+</Link>
+)
+},
+{
+value: 'reduce',
+label: (
+<Link to='/reduce' className='linkRouter'>
+Reduce Method
+</Link>
+)
+},
+{
+value: 'sort',
+label: (
+<Link to='/sort' className='linkRouter'>
+Sort Method
+</Link>
+)
+}
 ];
 
 useEffect(() => {
@@ -60,7 +96,12 @@ function Nav(props) {
 }
 const navItems = (
 <ul>
-<li>Home</li>
+<li onClick={() => handleChange(null)}>
+<Link to='/' className='linkRouter'>
+Home
+</Link>
+</li>
+
 <li>
 <Select
 classNamePrefix='customSelect'

src/container/Filter/filter.style.js

@@ -0,0 +1,26 @@
+import style from 'styled-components';
+
+const FilterStyle = style.div`
+ .filterFn-container{
+ position: relative;
+ .rotate-zero{
+ transform: rotate(0deg) !important;
+ }
+ .filterFn{
+ width: 150px;
+ height: 150px; 
+ background-image: linear-gradient(to right top, #053046, #085570, #057d9b, #00a8c4, #12d5eb);
+ border-radius: 20px;
+ margin: 90px auto; 
+ & > span{
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ }
+ }
+ }
+`;
+
+export { FilterStyle };

src/container/Filter/index.js

@@ -0,0 +1,130 @@
+import React, { useRef, useEffect } from 'react';
+import { TweenMax } from 'gsap';
+import CodePanel from '../../components/codepanel';
+import { arrayMethod } from '../../utils/data';
+import { FilterStyle } from './filter.style';
+import Block from '../../components/Blocks';
+
+function Filter() {
+const filterFn = useRef(null);
+const block1 = useRef(null);
+const block2 = useRef(null);
+const block3 = useRef(null);
+const block4 = useRef(null);
+const block5 = useRef(null);
+const block6 = useRef(null);
+useEffect(() => {
+// filterFn.current.classList.remove('rotate-zero');
+TweenMax.fromTo(
+filterFn.current,
+0.5,
+{
+x: '+=20',
+yoyo: true,
+repeat: 10,
+rotation: 20
+},
+{
+x: '-=20',
+yoyo: true,
+repeat: 10,
+rotation: -20,
+onComplete: () => {
+filterFn.current && (filterFn.current.className += ' rotate-zero');
+}
+}
+).delay(4.2);
+TweenMax.fromTo(
+block1.current,
+0.7,
+{ css: { top: 0, left: 0, opacity: 1 } },
+{ css: { top: '150px', left: '30%', opacity: 0 } }
+).delay(0.6);
+TweenMax.fromTo(
+block2.current,
+0.7,
+{ css: { top: 0, left: 0, opacity: 1 } },
+{ css: { top: '150px', left: '10%', opacity: 0 } }
+).delay(1.2);
+TweenMax.fromTo(
+block3.current,
+0.7,
+{ css: { top: 0, left: 0, opacity: 1 } },
+{ css: { top: '150px', left: '-10%', opacity: 0 } }
+).delay(1.8);
+TweenMax.fromTo(
+block4.current,
+0.7,
+{ css: { top: 0, left: 0, opacity: 1 } },
+{ css: { top: '150px', left: '-30%', opacity: 0 } }
+).delay(2.4);
+TweenMax.fromTo(
+block5.current,
+0.7,
+{ css: { top: '-150px', left: '10%', opacity: 0 } },
+{ css: { top: 0, left: 0, opacity: 1 } }
+).delay(3);
+TweenMax.fromTo(
+block6.current,
+0.7,
+{ css: { top: '-150px', left: '-10%', opacity: 0 } },
+{ css: { top: 0, left: 0, opacity: 1 } }
+).delay(3.6);
+}, []);
+return (
+<FilterStyle>
+<h1>Filter Array Method</h1>
+<CodePanel>
+<div dangerouslySetInnerHTML={{ __html: arrayMethod.filter.data }} />
+<div
+dangerouslySetInnerHTML={{ __html: arrayMethod.filter.function }}
+/>
+<div>---OR---</div>
+<div
+dangerouslySetInnerHTML={{
+__html: arrayMethod.filter.alternative_function
+}}
+/>
+<div>{arrayMethod.filter.result}</div>
+</CodePanel>
+<div>
+<Block fontSize={7}>
+<div className='box'>{"{name: '', franchise: ''}"}</div>
+<div className='box'>{"{name: '', franchise: ''}"}</div>
+<div className='box'>{"{name: '', franchise: ''}"}</div>
+<div className='box'>{"{name: '', franchise: ''}"}</div>
+</Block>
+<Block fontSize={7} marginTop='-50px'>
+<div className='box' ref={block1}>
+{"{name: '', franchise: ''}"}
+</div>
+<div className='box' ref={block2}>
+{"{name: '', franchise: ''}"}
+</div>
+<div className='box' ref={block3}>
+{"{name: '', franchise: ''}"}
+</div>
+<div className='box' ref={block4}>
+{"{name: '', franchise: ''}"}
+</div>
+</Block>
+<div className='filterFn-container'>
+<div ref={filterFn} className='filterFn rotate-zero'>
+<span>Filter Function</span>
+</div>
+</div>
+<Block fontSize={7}>
+<div className='box d-none'></div>
+<div className='box' ref={block5}>
+{"{name: '', franchise: ''}"}
+</div>
+<div className='box' ref={block6}>
+{"{name: '', franchise: ''}"}
+</div>
+</Block>
+</div>
+</FilterStyle>
+);
+}
+
+export default Filter;

src/container/Find/find.style.js

@@ -0,0 +1,15 @@
+import style from 'styled-components';
+
+const FindStyle = style.div`
+ .right-block, .wrong-block{
+ opacity: 1 !important;
+ transform: matrix(1, 0, 0, 1, 0, 0) scale(1) !important;
+ }
+ .wrong-block{
+ background-image: linear-gradient(to right top, #690809, #840c13, #a10f1b, #bf1125, #de122f);
+ font-size: 28px !important;
+ color: white; 
+ }
+`;
+
+export { FindStyle };