Day-05

Practicing with building mini projects useState useEffect

creating a tabs for different user
npm i react-icons

App.js

import React, { useState, useEffect } from 'react'
import { FaAngleDoubleRight } from 'react-icons/fa'
// ATTENTION!!!!!!!!!!
// I SWITCHED TO PERMANENT DOMAIN
const url = 'https://course-api.com/react-tabs-project'
function App() {
  const [loading,setLoading]=useState(true)
  const [jobs,setJobs]=useState([])
  const [value,setValue]=useState(1)

  const fetchJobs=async ()=>{
    const response=await fetch(url)
    const newJobs=await response.json()
    setJobs(newJobs)
    setLoading(false)
  }

  useEffect(()=>{
      fetchJobs();
  },[])

 if(loading){
  return (<section className='section loading'>
  <h1>
  loading...
  </h1></section>)
 }
 const {company,dates,duties,title}=jobs[value]

  return <section className="section">
            <div className="title">
              <h2>experience</h2>
            <div className="underline"></div>
            </div>
            <div className="jobs-center">
             <div className="btn-container">
             {
               jobs.map((item,index)=>{
                 return <button key={item.id} 
                               className={`job-btn ${index===value&&'active-btn'}`} 
                               onClick={()=>setValue(index)}>
                               {item.company}
                        </button>

               })
             }
             </div>

             <article className="job-info">
             <h3>{title}</h3>
             <h4>{company}</h4>
             <p className="job-date">{dates}</p>
             {duties.map((duty,index)=>{
               return <div className="job-desc" key={index}>
                          <FaAngleDoubleRight className='job-icon'/>
                          <p>{ duty}</p>
                      </div>
             })}
             </article>
            </div>
          </section>
}

export default App

css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}