From 7b8bd90ecb8bc07faf8c16d7b5e1a6965457309a Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Thu, 22 Feb 2024 21:51:09 +0300 Subject: [PATCH 1/5] onMouseEnter --- .../resources2/sections/ResourceCard.jsx | 20 +++++++++++++++---- src/router/index.jsx | 15 ++++---------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/APP/pages/resources2/sections/ResourceCard.jsx b/src/APP/pages/resources2/sections/ResourceCard.jsx index c01e7f66..73615a29 100644 --- a/src/APP/pages/resources2/sections/ResourceCard.jsx +++ b/src/APP/pages/resources2/sections/ResourceCard.jsx @@ -1,18 +1,25 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { arrow, course1 } from "../../../../assets/images/resources-page"; const ResourceCard = () => { const [hovered, setHovered] = useState(false); + useEffect(() => {}, [hovered]); + return (
setHovered(false)} + onMouseEnter={() => { + console.log("On mouse Enter"); + setHovered((prev) => !prev); + }} + // ref={} > {/* img cover */}
@@ -55,7 +62,12 @@ const ResourceCard = () => {
- Coursera +
+ Coursera + + Beginner + +
setHovered(false)} diff --git a/src/router/index.jsx b/src/router/index.jsx index 3b935f0d..1b58ace9 100644 --- a/src/router/index.jsx +++ b/src/router/index.jsx @@ -16,7 +16,6 @@ import { DonatePage, Homepage, Resources, - ProductDisplay, Checkout, SingleEvent, @@ -26,7 +25,6 @@ import { Error400, Error403, GalleryPage, - } from "../APP"; // import { // AllChaptersPage, @@ -66,12 +64,10 @@ const router = createBrowserRouter([ element: , }, { - path: "/Gallery", element: , }, { - path: "/blogs", element: , }, @@ -108,10 +104,10 @@ const router = createBrowserRouter([ path: "/events/:id", // New route path element: , }, - // { - // path: "/resources", - // element: , - // }, + { + path: "/resources", + element: , + }, // { // path: "/donate", @@ -123,7 +119,6 @@ const router = createBrowserRouter([ // }, // { - // path: "/signup", // element: , // }, @@ -132,7 +127,6 @@ const router = createBrowserRouter([ // element: , // }, ], - }, { path: "/error-400", @@ -151,7 +145,6 @@ const router = createBrowserRouter([ element: , }, - // { // path: "/admin", // element: , From c26d54b527f371842d2f7d679b422d518bb20158 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Fri, 23 Feb 2024 12:32:10 +0300 Subject: [PATCH 2/5] reinit resource page --- package.json | 2 +- src/APP/components/Header2.jsx | 10 +- .../pages/resources2/sections/HeroSection.jsx | 62 ++++--- .../resources2/sections/ResourceCard.jsx | 172 +++++++++--------- .../resources2/sections/ResourcesSection.jsx | 112 ++---------- src/APP/pages/resources2/sections/data.js | 150 +++++++++++++++ src/assets/images/resources-page/index.js | 90 ++++----- 7 files changed, 335 insertions(+), 263 deletions(-) create mode 100644 src/APP/pages/resources2/sections/data.js diff --git a/package.json b/package.json index d383175b..9439c340 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", - "@headlessui/react": "^1.7.15", + "@headlessui/react": "^1.7.18", "@hookform/resolvers": "^3.3.2", "@tanstack/react-query": "^4.35.3", "@tanstack/react-query-devtools": "^4.35.3", diff --git a/src/APP/components/Header2.jsx b/src/APP/components/Header2.jsx index 3739e04f..a15745c9 100644 --- a/src/APP/components/Header2.jsx +++ b/src/APP/components/Header2.jsx @@ -30,11 +30,11 @@ const navLinks = [ link: "Blogs", route: "/blogs", }, - // { - // id: 6, - // link: "Resources", - // route: "/resources", - // }, + { + id: 6, + link: "Resources", + route: "/resources", + }, // { // id: 7, // link: "Shop", diff --git a/src/APP/pages/resources2/sections/HeroSection.jsx b/src/APP/pages/resources2/sections/HeroSection.jsx index c2010f2e..72afd2ee 100644 --- a/src/APP/pages/resources2/sections/HeroSection.jsx +++ b/src/APP/pages/resources2/sections/HeroSection.jsx @@ -1,30 +1,32 @@ -import { earth_moon } from "../../../../assets/images/resources-page"; - -const HeroSection = () => { - return ( -
-
-
Resources
- -

- Discover{" "} - tech tools and resources to - boost your productivity -

-

- Master the art of tech with our expert guides, tutorials, and - step-by-step instructions to help you develop proficiency and - confidence in the world of technology. -

-
- - earth & moon -
- ); -}; - -export default HeroSection; +import React from "react"; + +import { earthMoon } from "../../../../assets/images/resources-page"; + +function HeroSection() { + return ( +
+
+
Resources
+ +

+ Discover{" "} + tech tools and resources + to boost your productivity +

+

+ Master the art of tech with our expert guides, tutorials, and + step-by-step instructions to help you develop proficiency and + confidence in the world of technology. +

+
+ + earth & moon +
+ ); +} + +export default HeroSection; diff --git a/src/APP/pages/resources2/sections/ResourceCard.jsx b/src/APP/pages/resources2/sections/ResourceCard.jsx index 73615a29..2355d9a6 100644 --- a/src/APP/pages/resources2/sections/ResourceCard.jsx +++ b/src/APP/pages/resources2/sections/ResourceCard.jsx @@ -1,89 +1,83 @@ -import React, { useEffect, useState } from "react"; -import { arrow, course1 } from "../../../../assets/images/resources-page"; - -const ResourceCard = () => { - const [hovered, setHovered] = useState(false); - - useEffect(() => {}, [hovered]); - - return ( -
-
setHovered(false)} - onMouseEnter={() => { - console.log("On mouse Enter"); - setHovered((prev) => !prev); - }} - // ref={} - > - {/* img cover */} -
- -
- - {/* desc */} -
-
-
Course
- setHovered((prev) => !prev)} - /> -
- -
-

setHovered((prev) => !prev)} - > - React: Creating and Hosting a Full-stack Site -

- - {/* Show/Hide div */} -
- Description -

- This course covers the basics of React, from beginner to - advanced and is very appropriate for those people who have just - finished learning JavaScript and feel ready to start learning - React. The course is self-paced, lasting for 6 months or earlier - and is taught by instructors for Google. Would highly recommend - this course. -

-
-
- -
- Coursera - - Beginner - -
- - setHovered(false)} - href="/resources" - target="_blank" - rel="noopener noreferrer" - className={`w-fit mx-auto border border-[#12A97E] rounded-lg py-[10px] px-10 text-sm text-[#009975] transition-all duration-500 ease-in hover:text-white hover:bg-[#009975] font-normal ${ - hovered ? "flex" : "hidden" - }`} - > - Go to site - -
-
-
- ); -}; - -export default ResourceCard; +import React, { useEffect, useState } from "react"; +import { arrow, course1 } from "../../../../assets/images/resources-page"; + +function ResourceCard() { + const [hovered, setHovered] = useState(false); + + useEffect(() => {}, [hovered]); + + return ( +
+
setHovered(false)} + onMouseEnter={() => { + setHovered((prev) => !prev); + }} + > + {/* img cover */} +
+ +
+ + {/* desc */} +
+
+
Course
+ +
+ +
+

+ React: Creating and Hosting a Full-stack Site +

+ + {/* Show/Hide div */} +
+ Description +

+ This course covers the basics of React, from beginner to + advanced and is very appropriate for those people who have just + finished learning JavaScript and feel ready to start learning + React. The course is self-paced, lasting for 6 months or earlier + and is taught by instructors for Google. Would highly recommend + this course. +

+
+
+ +
+ Coursera + + Beginner + +
+ + setHovered(false)} + href="/resources" + target="_blank" + rel="noopener noreferrer" + className={`w-fit mx-auto border border-[#12A97E] rounded-lg py-[10px] px-10 text-sm text-[#009975] transition-all duration-500 ease-in hover:text-white hover:bg-[#009975] font-normal ${ + hovered ? "flex" : "hidden" + }`} + > + Go to site + +
+
+
+ ); +} + +export default ResourceCard; diff --git a/src/APP/pages/resources2/sections/ResourcesSection.jsx b/src/APP/pages/resources2/sections/ResourcesSection.jsx index 72b93198..473d0a2d 100644 --- a/src/APP/pages/resources2/sections/ResourcesSection.jsx +++ b/src/APP/pages/resources2/sections/ResourcesSection.jsx @@ -2,45 +2,29 @@ import React, { useState } from "react"; import { courses, search } from "../../../../assets/images/resources-page"; import ResourceCard from "./ResourceCard"; -import BlogPagination from "../../blogs/sections/BlogPagination"; -// import useResourcesData from "../../../../hooks/Queries/resources/useResourcesData"; -const DifficultyCard = ({ title, selected }) => { - return ( -
-
- -
- -

{title}

-
- ); -}; +// function DifficultyCard({ title, selected }) { +// return ( +//
+//
+// +//
+ +//

{title}

+//
+// ); +// } function ResourcesSection() { const [searchText, setSearchText] = useState(""); - // const { - // data: resourceTypes, - // isLoading, - // isError, - // isSuccess, - // } = useResourcesData(); - - const handleSearch = (e) => { - e.preventDefault(); - console.log(searchText); - }; return ( <> - {/* {isError &&

Error loading resource categories!

} - {isLoading &&

Loading resource categories...

} */} - {/* {isSuccess && ( */} -
+
setSearchText(e.target.value)} /> - search -
- -
- {/* mobile difficulty filter */} -
- - - -
- - {/* Field filter */} -
- - - - - -
- - {/* ResourceCard Wrapper & Desktop Difficulty filters */} -
-
- - - -
-
- - - - - - - - -
-
- - + search
+ +
resources page
); } diff --git a/src/APP/pages/resources2/sections/data.js b/src/APP/pages/resources2/sections/data.js new file mode 100644 index 00000000..221c7179 --- /dev/null +++ b/src/APP/pages/resources2/sections/data.js @@ -0,0 +1,150 @@ +import { + course1, + course2, + course3, + course4, +} from "../../../../assets/images/resources-page"; + +// eslint-disable-next-line import/prefer-default-export +export const resources = [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "beginner", + }, + { + id: 2, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + }, + { + id: 3, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "expert", + }, + { + id: 4, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "beginner", + }, + { + id: 5, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "expert", + }, + { + id: 6, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + }, + { + id: 7, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + }, + { + id: 8, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "beginner", + }, + { + id: 9, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + }, + { + id: 10, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + }, + { + id: 11, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "intermediate", + }, + { + id: 12, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + }, + { + id: 13, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + }, + { + id: 14, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "expert", + }, +]; diff --git a/src/assets/images/resources-page/index.js b/src/assets/images/resources-page/index.js index 1029e5b3..ecde2984 100644 --- a/src/assets/images/resources-page/index.js +++ b/src/assets/images/resources-page/index.js @@ -1,45 +1,45 @@ -import earth_moon from "./earth_moon.png"; -import curriculums from "./curriculums.png"; -import mentorlst from "./mentorlst.png"; -import podcasts from "./podcasts.png"; -import yt_channel from "./yt-channel.png"; -import search from "./search-icon.svg"; - -import community from "./community.png"; -import courses from "./courses.png"; -import events from "./events.png"; -import jobs from "./jobs.png"; -import masterclass from "./masterclass.png"; -import microphone from "./microphone.png"; -import tools from "./tools.png"; -import youtube from "./youtube.png"; -import arrowRight from "./arrow-right.png"; -import arrow from "./arrow.svg"; - -import course1 from "./course1.png"; -import course2 from "./course2.png"; -import course3 from "./course3.png"; -import course4 from "./course4.png"; - -export { - earth_moon, - curriculums, - mentorlst, - podcasts, - search, - yt_channel, - community, - courses, - events, - jobs, - masterclass, - microphone, - tools, - youtube, - arrowRight, - course1, - course2, - course3, - course4, - arrow, -}; +import earthMoon from "./earth_moon.png"; +import curriculums from "./curriculums.png"; +import mentorlst from "./mentorlst.png"; +import podcasts from "./podcasts.png"; +import ytChannel from "./yt-channel.png"; +import search from "./search-icon.svg"; + +import community from "./community.png"; +import courses from "./courses.png"; +import events from "./events.png"; +import jobs from "./jobs.png"; +import masterclass from "./masterclass.png"; +import microphone from "./microphone.png"; +import tools from "./tools.png"; +import youtube from "./youtube.png"; +import arrowRight from "./arrow-right.png"; +import arrow from "./arrow.svg"; + +import course1 from "./course1.png"; +import course2 from "./course2.png"; +import course3 from "./course3.png"; +import course4 from "./course4.png"; + +export { + earthMoon, + curriculums, + mentorlst, + podcasts, + search, + ytChannel, + community, + courses, + events, + jobs, + masterclass, + microphone, + tools, + youtube, + arrowRight, + course1, + course2, + course3, + course4, + arrow, +}; From 5b0e392819dcd1312a071766e62ad8fc6dfb44e5 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Fri, 23 Feb 2024 13:19:47 +0300 Subject: [PATCH 3/5] map data --- .../resources2/sections/ResourceCard.jsx | 31 +- .../resources2/sections/ResourcesSection.jsx | 64 ++- src/APP/pages/resources2/sections/data.js | 418 ++++++++++++------ 3 files changed, 371 insertions(+), 142 deletions(-) diff --git a/src/APP/pages/resources2/sections/ResourceCard.jsx b/src/APP/pages/resources2/sections/ResourceCard.jsx index 2355d9a6..763b4673 100644 --- a/src/APP/pages/resources2/sections/ResourceCard.jsx +++ b/src/APP/pages/resources2/sections/ResourceCard.jsx @@ -1,7 +1,15 @@ import React, { useEffect, useState } from "react"; import { arrow, course1 } from "../../../../assets/images/resources-page"; -function ResourceCard() { +function ResourceCard({ + type, + title, + description, + image, + origin, + level, + topic, +}) { const [hovered, setHovered] = useState(false); useEffect(() => {}, [hovered]); @@ -21,16 +29,16 @@ function ResourceCard() { > {/* img cover */}
- + {title}
{/* desc */}
-
Course
+
{type}

- React: Creating and Hosting a Full-stack Site + {title}

{/* Show/Hide div */}
Description

- This course covers the basics of React, from beginner to - advanced and is very appropriate for those people who have just - finished learning JavaScript and feel ready to start learning - React. The course is self-paced, lasting for 6 months or earlier - and is taught by instructors for Google. Would highly recommend - this course. + {description}

- Coursera - - Beginner + {origin} + + {level}
diff --git a/src/APP/pages/resources2/sections/ResourcesSection.jsx b/src/APP/pages/resources2/sections/ResourcesSection.jsx index 473d0a2d..7d15ec99 100644 --- a/src/APP/pages/resources2/sections/ResourcesSection.jsx +++ b/src/APP/pages/resources2/sections/ResourcesSection.jsx @@ -1,7 +1,9 @@ import React, { useState } from "react"; +import { Tab } from "@headlessui/react"; -import { courses, search } from "../../../../assets/images/resources-page"; +import { search } from "../../../../assets/images/resources-page"; import ResourceCard from "./ResourceCard"; +import { resourcesData } from "./data"; // function DifficultyCard({ title, selected }) { // return ( @@ -18,6 +20,9 @@ import ResourceCard from "./ResourceCard"; //
// ); // } +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} function ResourcesSection() { const [searchText, setSearchText] = useState(""); @@ -37,7 +42,62 @@ function ResourcesSection() {
-
resources page
+ + + {resourcesData.map(({ id, topic }) => ( + + // eslint-disable-next-line implicit-arrow-linebreak + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + {topic} + + ))} + + + + {resourcesData.map(({ id, resources }) => ( + + {resources.map( + ({ + id, + type, + title, + description, + image, + origin, + level, + topic, + }) => ( + + ) + )} + + ))} + + ); } diff --git a/src/APP/pages/resources2/sections/data.js b/src/APP/pages/resources2/sections/data.js index 221c7179..19fee19d 100644 --- a/src/APP/pages/resources2/sections/data.js +++ b/src/APP/pages/resources2/sections/data.js @@ -6,145 +6,311 @@ import { } from "../../../../assets/images/resources-page"; // eslint-disable-next-line import/prefer-default-export -export const resources = [ +export const resourcesData = [ { id: 1, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course1, - origin: "Coursera", - level: "beginner", + topic: "Frontend Development", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + topic: "Frontend Development", + link: "/", + }, + { + id: 11, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "intermediate", + topic: "Frontend Development", + link: "/", + }, + { + id: 13, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Frontend Development", + link: "/", + }, + ], }, { id: 2, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course2, - origin: "Coursera", - level: "intermediate", + topic: "Backend Development", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + topic: "Backend Development", + link: "/", + }, + { + id: 11, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + { + id: 13, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + { + id: 10, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + { + id: 2, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + { + id: 3, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + { + id: 4, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/", + }, + ], }, { id: 3, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course3, - origin: "Coursera", - level: "expert", + topic: "UI/UX Design", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 2, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 3, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 4, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 5, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 6, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 7, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + { + id: 8, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/", + }, + ], }, { id: 4, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course4, - origin: "Coursera", - level: "beginner", + topic: "Product Management", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Product Management", + link: "/", + }, + { + id: 2, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Product Management", + link: "/", + }, + { + id: 3, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Product Management", + link: "/", + }, + ], }, { id: 5, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course3, - origin: "Coursera", - level: "expert", - }, - { - id: 6, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course2, - origin: "Coursera", - level: "intermediate", - }, - { - id: 7, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course1, - origin: "Coursera", - level: "expert", - }, - { - id: 8, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course4, - origin: "Coursera", - level: "beginner", - }, - { - id: 9, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course2, - origin: "Coursera", - level: "intermediate", - }, - { - id: 10, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course1, - origin: "Coursera", - level: "expert", - }, - { - id: 11, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course4, - origin: "Coursera", - level: "intermediate", - }, - { - id: 12, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course3, - origin: "Coursera", - level: "beginner", - }, - { - id: 13, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course2, - origin: "Coursera", - level: "intermediate", - }, - { - id: 14, - type: "Course", - title: "React: Creating and Hosting a Full-stack Site", - description: - "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", - image: course4, - origin: "Coursera", - level: "expert", + topic: "Android Development", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Android Management", + link: "/", + }, + { + id: 2, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Android Management", + link: "/", + }, + ], }, ]; From 905de7b44603671e7111b1820b41f6e45b8f13fe Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Fri, 23 Feb 2024 15:17:19 +0300 Subject: [PATCH 4/5] add all tab --- .../resources2/sections/ResourceCard.jsx | 34 ++++-- .../resources2/sections/ResourcesSection.jsx | 69 ++++++++--- src/APP/pages/resources2/sections/data.js | 112 +++++++++--------- 3 files changed, 131 insertions(+), 84 deletions(-) diff --git a/src/APP/pages/resources2/sections/ResourceCard.jsx b/src/APP/pages/resources2/sections/ResourceCard.jsx index 763b4673..7974d50e 100644 --- a/src/APP/pages/resources2/sections/ResourceCard.jsx +++ b/src/APP/pages/resources2/sections/ResourceCard.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { arrow, course1 } from "../../../../assets/images/resources-page"; +import { arrow, arrowRight } from "../../../../assets/images/resources-page"; function ResourceCard({ type, @@ -8,18 +8,28 @@ function ResourceCard({ image, origin, level, - topic, + link, }) { const [hovered, setHovered] = useState(false); + const color = (lev) => { + if (lev === "beginner") { + return "text-primary"; + } + if (lev === "intermediate") { + return "text-gray-500"; + } + return "text-red-500"; + }; + useEffect(() => {}, [hovered]); return (
setHovered(false)} @@ -28,7 +38,7 @@ function ResourceCard({ }} > {/* img cover */} -
+
{title}
@@ -39,7 +49,7 @@ function ResourceCard({ arrow @@ -53,22 +63,26 @@ function ResourceCard({ {/* Show/Hide div */}
Description -

+

{description}

-
+
{origin} - + {level}
setHovered(false)} - href="/resources" + href={link} target="_blank" rel="noopener noreferrer" className={`w-fit mx-auto border border-[#12A97E] rounded-lg py-[10px] px-10 text-sm text-[#009975] transition-all duration-500 ease-in hover:text-white hover:bg-[#009975] font-normal ${ diff --git a/src/APP/pages/resources2/sections/ResourcesSection.jsx b/src/APP/pages/resources2/sections/ResourcesSection.jsx index 7d15ec99..9e8cccec 100644 --- a/src/APP/pages/resources2/sections/ResourcesSection.jsx +++ b/src/APP/pages/resources2/sections/ResourcesSection.jsx @@ -1,25 +1,11 @@ +/* eslint-disable implicit-arrow-linebreak */ import React, { useState } from "react"; import { Tab } from "@headlessui/react"; +import { resourcesData } from "./data"; import { search } from "../../../../assets/images/resources-page"; import ResourceCard from "./ResourceCard"; -import { resourcesData } from "./data"; -// function DifficultyCard({ title, selected }) { -// return ( -//
-//
-// -//
- -//

{title}

-//
-// ); -// } function classNames(...classes) { return classes.filter(Boolean).join(" "); } @@ -44,11 +30,24 @@ function ResourcesSection() { + + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + All + + {resourcesData.map(({ id, topic }) => ( - // eslint-disable-next-line implicit-arrow-linebreak classNames( "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", @@ -64,11 +63,43 @@ function ResourcesSection() { + + {resourcesData + .flatMap(({ resources }) => resources) + .map( + ({ + id, + type, + title, + description, + image, + origin, + level, + link, + }) => ( + + ) + )} + + {resourcesData.map(({ id, resources }) => ( {resources.map( @@ -81,6 +112,7 @@ function ResourcesSection() { origin, level, topic, + link, }) => ( ) )} diff --git a/src/APP/pages/resources2/sections/data.js b/src/APP/pages/resources2/sections/data.js index 19fee19d..658f8222 100644 --- a/src/APP/pages/resources2/sections/data.js +++ b/src/APP/pages/resources2/sections/data.js @@ -21,11 +21,11 @@ export const resourcesData = [ origin: "Coursera", level: "beginner", topic: "Frontend Development", - link: "/", + link: "/resources", }, { - id: 11, - type: "Course", + id: 2, + type: "Article", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", @@ -33,19 +33,19 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Frontend Development", - link: "/", + link: "/resources", }, { - id: 13, + id: 3, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course2, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Frontend Development", - link: "/", + link: "/resources", }, ], }, @@ -54,8 +54,8 @@ export const resourcesData = [ topic: "Backend Development", resources: [ { - id: 1, - type: "Course", + id: 4, + type: "Article", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", @@ -63,22 +63,22 @@ export const resourcesData = [ origin: "Coursera", level: "beginner", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 11, + id: 5, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course3, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 13, + id: 6, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -87,10 +87,10 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 10, + id: 7, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -99,22 +99,22 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 2, + id: 8, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course2, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 3, + id: 9, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -123,10 +123,10 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Backend Development", - link: "/", + link: "/resources", }, { - id: 4, + id: 10, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -135,7 +135,7 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Backend Development", - link: "/", + link: "/resources", }, ], }, @@ -144,7 +144,7 @@ export const resourcesData = [ topic: "UI/UX Design", resources: [ { - id: 1, + id: 11, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -153,10 +153,10 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 2, + id: 12, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -165,10 +165,10 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 3, + id: 13, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -177,22 +177,22 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 4, + id: 14, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course1, origin: "Coursera", - level: "expert", + level: "beginner", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 5, + id: 15, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -201,10 +201,10 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 6, + id: 16, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -213,22 +213,22 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 7, + id: 17, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course1, origin: "Coursera", - level: "expert", + level: "beginner", topic: "UI/UX Design", - link: "/", + link: "/resources", }, { - id: 8, + id: 18, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -237,7 +237,7 @@ export const resourcesData = [ origin: "Coursera", level: "expert", topic: "UI/UX Design", - link: "/", + link: "/resources", }, ], }, @@ -246,7 +246,7 @@ export const resourcesData = [ topic: "Product Management", resources: [ { - id: 1, + id: 19, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -255,31 +255,31 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Product Management", - link: "/", + link: "/resources", }, { - id: 2, + id: 20, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course2, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Product Management", - link: "/", + link: "/resources", }, { - id: 3, + id: 21, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course2, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Product Management", - link: "/", + link: "/resources", }, ], }, @@ -288,19 +288,19 @@ export const resourcesData = [ topic: "Android Development", resources: [ { - id: 1, - type: "Course", + id: 22, + type: "Video", title: "React: Creating and Hosting a Full-stack Site", description: "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", image: course2, origin: "Coursera", - level: "intermediate", + level: "beginner", topic: "Android Management", - link: "/", + link: "/resources", }, { - id: 2, + id: 23, type: "Course", title: "React: Creating and Hosting a Full-stack Site", description: @@ -309,7 +309,7 @@ export const resourcesData = [ origin: "Coursera", level: "intermediate", topic: "Android Management", - link: "/", + link: "/resources", }, ], }, From 1d2ee56c7b5d8a0f2d93a64bc356aa95d36189fa Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Sat, 24 Feb 2024 12:18:39 +0300 Subject: [PATCH 5/5] delete unused resources page --- src/APP/index.js | 2 +- src/APP/pages/resources/Resources.jsx | 12 ---- .../pages/resources/sections/HeroSection.jsx | 63 ------------------- .../pages/resources/sections/ResourceCard.jsx | 32 ---------- .../resources/sections/ResourcesSection.jsx | 57 ----------------- src/APP/pages/resources/sections/index.js | 5 -- 6 files changed, 1 insertion(+), 170 deletions(-) delete mode 100644 src/APP/pages/resources/Resources.jsx delete mode 100644 src/APP/pages/resources/sections/HeroSection.jsx delete mode 100644 src/APP/pages/resources/sections/ResourceCard.jsx delete mode 100644 src/APP/pages/resources/sections/ResourcesSection.jsx delete mode 100644 src/APP/pages/resources/sections/index.js diff --git a/src/APP/index.js b/src/APP/index.js index 7288a6ae..bc5d243f 100644 --- a/src/APP/index.js +++ b/src/APP/index.js @@ -27,7 +27,7 @@ import GalleryPage from "./pages/gallery/GalleryPage"; import LandingPage from "./pages/landingPage/LandingPage"; import Layout from "./pages/Layout"; import Products from "./pages/products2/Products"; -import Resources from "./pages/resources/Resources"; +import Resources from "./pages/resources2/Resources"; import Homepage from "./pages/shop/Homepage"; import Checkout from "./pages/shop/OrderSummaryPage"; import ProductDisplay from "./pages/shop/ProductDisplayPage"; diff --git a/src/APP/pages/resources/Resources.jsx b/src/APP/pages/resources/Resources.jsx deleted file mode 100644 index 62d1efa9..00000000 --- a/src/APP/pages/resources/Resources.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { HeroSection, ResourcesSection } from "./sections"; - -const Resources = () => { - return ( -
- - -
- ); -}; - -export default Resources; diff --git a/src/APP/pages/resources/sections/HeroSection.jsx b/src/APP/pages/resources/sections/HeroSection.jsx deleted file mode 100644 index 48c94e84..00000000 --- a/src/APP/pages/resources/sections/HeroSection.jsx +++ /dev/null @@ -1,63 +0,0 @@ -// <<<<<<< felix-blog-page-build -import { earth_moon } from "../../../../assets/images/resources-page"; - -const HeroSection = () => { - return ( -
-
-
Resources
- -

- Discover{" "} - tech tools and resources to - boost your productivity -

-

- Master the art of tech with our expert guides, tutorials, and - step-by-step instructions to help you develop proficiency and - confidence in the world of technology. -

-
- - earth & moon -
- ); -}; - -export default HeroSection; -// ======= -// import { earth_moon } from "../../../../assets/images/resources-page"; - -// const HeroSection = () => { -// return ( -//
-//
-//
Resources
- -//

-// Discover{" "} -// tech tools and resources to -// boost your productivity -//

-//

-// Master the art of tech with our expert guides, tutorials, and -// step-by-step instructions to help you develop proficiency and -// confidence in the world of technology. -//

-//
- -// earth & moon -//
-// ); -// }; - -// export default HeroSection; -// >>>>>>> main diff --git a/src/APP/pages/resources/sections/ResourceCard.jsx b/src/APP/pages/resources/sections/ResourceCard.jsx deleted file mode 100644 index df33f82f..00000000 --- a/src/APP/pages/resources/sections/ResourceCard.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { tools } from "../../../../assets/images/resources-page"; - -import { arrowRight } from "../../../../assets/images/resources-page"; - -const ResourceCard = ({ resource }) => { - const { id, name, description } = resource; - return ( -
-
- {name} -
- -

{name}

- -

{description}

- - - {/* */} - -
- ); -}; - -export default ResourceCard; diff --git a/src/APP/pages/resources/sections/ResourcesSection.jsx b/src/APP/pages/resources/sections/ResourcesSection.jsx deleted file mode 100644 index dde13f5d..00000000 --- a/src/APP/pages/resources/sections/ResourcesSection.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState } from "react"; -import { search } from "../../../../assets/images/resources-page"; -import ResourceCard from "./ResourceCard"; -import useResourcesData from "../../../../hooks/Queries/resources/useResourcesData"; - -function ResourcesSection() { - const [searchText, setSearchText] = useState(""); - const { - data: resourceTypes, - isLoading, - isError, - isSuccess, - } = useResourcesData(); - - const handleSearch = (e) => { - e.preventDefault(); - console.log(searchText); - }; - - return ( - <> - {isError &&

Error loading resource categories!

} - {isLoading &&

Loading resource categories...

} - {isSuccess && ( - <> -
-
- setSearchText(e.target.value)} - /> - search -
- -
- {resourceTypes && Array.isArray(resourceTypes) - ? resourceTypes.map((resource) => ( - - )) - : ""} -
-
- - )} - - ); -} - -export default ResourcesSection; diff --git a/src/APP/pages/resources/sections/index.js b/src/APP/pages/resources/sections/index.js deleted file mode 100644 index 123ea04a..00000000 --- a/src/APP/pages/resources/sections/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import { default as HeroSection } from "./HeroSection"; -import { default as ResourcesSection } from "./ResourcesSection"; -import { default as ResourceCard } from "./ResourceCard"; - -export { HeroSection, ResourceCard, ResourcesSection };