o.abushaala/react-tutorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed Files

Browse Source
This commit is contained in:
Omama
2025-01-01 15:04:11 +02:00
parent 9982b71f57
commit d4270a1e84
4 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.jsx
View File

@@ -1,15 +1,15 @@
import {Route, createBrowserRouter, createRoutesFromElements, RouterProvider} from 'react-router-dom' import {Route, createBrowserRouter, createRoutesFromElements, RouterProvider} from 'react-router-dom'
import homepage from './pages/homepage' import HomePage from './pages/HomePage'
import mainlayout from './layouts/mainlayout' import MainLayout from './layouts/MainLayout'
import jobspage from './pages/jobspage'; import JobsPage from './pages/JobsPage';
import notfoundpage from './pages/notfoundpage'; import NotFoundPage from './pages/NotFoundPage';
const router = createBrowserRouter( const router = createBrowserRouter(
createRoutesFromElements( createRoutesFromElements(
<Route path = '/' element = {<mainlayout />}> <Route path = '/' element = {<MainLayout />}>
<Route index element = {<homepage />} /> <Route index element = {<HomePage />} />
<Route path = '/jobs' element = {<jobspage />} /> <Route path = '/jobs' element = {<JobsPage />} />
<Route path = '*' element = {<notfoundpage />} /> <Route path = '*' element = {<NotFoundPage />} />
</Route> </Route>

10
src/components/joblistings.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react' import React from 'react'
import jobs from '../jobs.json' import jobs from '../jobs.json'
import joblisting from './joblistings' import jobListing from './jobListings'
const joblistings = () => { const jobListings = ({isHome}) => {
const recentjobs = jobs.slice(0,3); const jobListings = isHome ? jobs.slice(0,3) : jobs;
return ( return (
<section className="bg-blue-50 px-4 py-10"> <section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto"> <div className="container-xl lg:container m-auto">
@@ -11,8 +11,8 @@ const joblistings = () => {
Browse Jobs Browse Jobs
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{recentjobs.map((job) => ( {jobListings.map((job) => (
<joblisting key = {job.id} job ={job} /> <jobListing key = {job.id} job ={job} />
))} ))}
</div> </div>

2
src/pages/homepage.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import hero from '../components/hero'; import hero from '../components/hero';
import homecards from '../components/homecards'; import homecards from '../components/homecards';
import joblistings from '../components/joblistings'; import joblistings from '../components/jobListings';
import viewalljobs from '../components/viewalljobs'; import viewalljobs from '../components/viewalljobs';
const homepage = () => { const homepage = () => {

10
src/pages/jobspage.jsx
View File

@@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
import joblistings from '../components/jobListings'
const jobspage = () => { const jobspage = () => {
return ( return
<div> <section className='bg-blue-50 px-4 py-6'>
<joblistings />
</div> </section>
)
} }
export default jobspage export default jobspage