feat: add the tabs project to the home app

Author: DinaTaklit

src/App.js

@@ -6,7 +6,7 @@ import ToursApp from './projects/2.Tours'
 import Reviews from './projects/3.Reviews'
 import Accordion from './projects/4.Accordion'
 import Menu from './projects/5.Menu'
-// import Tabs from './projects/6.Tabs'
+import Tabs from './projects/6.Tabs'
 // import Slider from './projects/7.Slider'
 // import Navbar from './projects/8.Navbar'
 // import SidebarModal from './projects/9.Sidebar-Modal'
@@ -25,8 +25,8 @@ function App() {
  <Route path="/reviews" component={Reviews}/>
  <Route path="/accordion" component={Accordion}/>
  <Route path="/menu" component={Menu}/>
- {/* <Route path="/tabs" component={Tabs}/>
- <Route path="/slider" component={Slider}/>
+ <Route path="/tabs" component={Tabs}/>
+ {/* <Route path="/slider" component={Slider}/>
  <Route path="/navbar" component={Navbar}/>
  <Route path="/sidebar-modal" component={SidebarModal}/>
  <Route path="/stripe-menu" component={StripeMenu}/>

src/data.js

@@ -24,6 +24,11 @@ const projects = [
  image: './images/projects_thumb/Menu.png',
  link: '/menu'
  },
+ {
+ title: 'Tabs',
+ image: './images/projects_thumb/Tabs.png',
+ link: '/tabs'
+ },
 
 ];
 export default projects;

src/projects/6.Tabs/App.js

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react'
+import { FaAngleDoubleRight } from 'react-icons/fa'
+
+
+const url = 'https://course-api.com/react-tabs-project'
+
+function App() {
+ const [loading, setLoading] = useState(true)
+ const [jobs, setJobs] = useState([])
+ const [value, setValue] = useState(0)
+
+ const fetchJobs = async() => {
+ const newJobs = await fetch(url).then(response => 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((job, index) => {
+ return (
+ <button
+ key={job.id}
+ onClick={() => setValue(index)}
+ className={`job-btn ${index === value && 'active-btn'}`}
+ >
+ {job.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">
+ </FaAngleDoubleRight>
+ <p>{duty}</p>
+ </div>
+ )
+ })
+ }
+ </article>
+ </div>
+ <button type="button" className="btn">
+ More info
+ </button>
+
+ </section>
+ )
+}
+
+export default App

src/projects/6.Tabs/index.js

@@ -1,75 +1,11 @@
-import { useState, useEffect } from 'react'
-import { FaAngleDoubleRight } from 'react-icons/fa'
-import './index.css'
-
-const url = 'https://course-api.com/react-tabs-project'
+import App from './App.js';
+import './index.scss'
 
 function Index() {
- const [loading, setLoading] = useState(true)
- const [jobs, setJobs] = useState([])
- const [value, setValue] = useState(0)
-
- const fetchJobs = async() => {
- const newJobs = await fetch(url).then(response => 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((job, index) => {
- return (
- <button
- key={job.id}
- onClick={() => setValue(index)}
- className={`job-btn ${index === value && 'active-btn'}`}
- >
- {job.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">
- </FaAngleDoubleRight>
- <p>{duty}</p>
- </div>
- )
- })
- }
- </article>
- </div>
- <button type="button" className="btn">
- More info
- </button>
-
- </section>
+ <div className="tabs">
+ <App/>
+ </div>
  )
 }
 

src/projects/6.Tabs/index.css renamed to src/projects/6.Tabs/index.scss

@@ -43,6 +43,8 @@ Variables
  --max-width: 1170px;
  --fixed-width: 620px;
  }
+
+.tabs {
  /*
  =============== 
  Global Styles
@@ -263,5 +265,5 @@ Variables
  color: var(--clr-primary-1);
  background: var(--clr-primary-8);
  }
- .center-btn {
- }
+
+}