Skip to content

Commit 6d4dcf1

Browse files
Mr-SunglassesMr-Sunglasses
authored
Merge pull request #292 from NegiSushant/modify_frontend
Reduce repetitive code of Frontend Roadmap Component
2 parents bb6ac19 + d0f2065 commit 6d4dcf1

File tree

1 file changed

+49
-56
lines changed

1 file changed

+49
-56
lines changed

‎src/components/frontend.jsx

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,56 @@
11
import React, { useState, useEffect } from "react";
2-
import arrow from "../assets/img/frontend_icons/icons-arrow.png"
3-
import downarrow from "../assets/img/frontend_icons/down_arrow.png"
4-
2+
import arrow from "../assets/img/frontend_icons/icons-arrow.png";
3+
import downarrow from "../assets/img/frontend_icons/down_arrow.png";
54

65
const Frontend = () => {
7-
return (
8-
<div>
9-
<h1 className="w-full mt-20 mb-24 text-white px-4 tracking-tight text-center text-5xl">Complete Frontend Roadmap</h1>
10-
11-
< div className='flex flex-wrap mx-40 mt-26 mb-20 justify-center gap-4 md:gap-4 sm:gap-4'>
12-
13-
<a href="/html_css" className=' sm:mb-10 px-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
14-
<h2 className='text-center font-bold text-3xl px-4 py-6'>HTML/ CSS</h2>
15-
</a>
16-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
17-
<img src={downarrow} className=" w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
18-
<a href="/tailwind" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
19-
<h2 className='text-center font-bold text-3xl px-4 py-6'>TAILWIND CSS</h2>
20-
</a>
21-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
22-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
23-
<a href="/javascript" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
24-
<h2 className='text-center font-bold text-3xl px-4 py-6'>JAVA SCRIPT</h2>
25-
</a>
26-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
27-
<img src={downarrow} className="w-15 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
28-
<a href="/reactjs" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
29-
<h2 className='text-center font-bold text-3xl px-4 py-6'>REACT JS</h2>
30-
</a>
31-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
32-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
33-
<a href="/nextjs" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
34-
<h2 className='text-center font-bold text-3xl px-4 py-6'>NEXT JS</h2>
35-
</a>
36-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
37-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
38-
<a href="/vuejs" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
39-
<h2 className='text-center font-bold text-3xl px-4 py-6'>VUE JS</h2>
40-
</a>
41-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
42-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
43-
<a href="/threejs" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
44-
<h2 className='text-center font-bold text-3xl px-4 py-6'>THREE JS</h2>
45-
</a>
46-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
47-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
48-
<a href="/reactnative" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
49-
<h2 className='text-center font-bold text-3xl px-4 py-6'>REACT NATIVE</h2>
50-
</a>
51-
<img src={arrow} className="w-0 h-0 max-w-screen-xl sm:w-20 sm:h-20"/>
52-
<img src={downarrow} className="w-20 h-20 max-w-screen-xl sm:w-0 sm:h-0"/>
53-
<a href="/electron" className='sm:mb-10 pl-2 pr-2 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none transition-color hover:text-white transition-color'>
54-
<h2 className='text-center font-bold text-3xl px-4 py-6'>ELECTRON</h2>
55-
</a>
6+
const courses = [
7+
{ name: "HTML / CSS", link: "/html_css" },
8+
{ name: "TAILWIND", link: "/tailwind" },
9+
{ name: "JAVA SCRIPT", link: "/javascript" },
10+
{ name: "REACT JS", link: "/reactjs" },
11+
{ name: "NEXT JS", link: "/nextjs" },
12+
{ name: "VUE JS", link: "/vuejs" },
13+
{ name: "THREE JS", link: "/threejs" },
14+
{ name: "REACT NATIVE", link: "/reactnative" },
15+
{ name: "ELECTRON", link: "/electron" },
16+
];
5617

57-
</div>
18+
return (
19+
<div className="bg-gray-800 min-h-screen py-20">
20+
<h1 className="w-full mb-24 text-white px-4 tracking-tight text-center text-5xl">
21+
Complete Frontend Roadmap
22+
</h1>
5823

59-
</div>
60-
);
24+
<div className="flex flex-wrap justify-center gap-4 mx-4 md:mx-20">
25+
{courses.map((course, index) => (
26+
<React.Fragment key={index}>
27+
<a
28+
href={course.link}
29+
className="w-full sm:w-auto sm:mb-10 flex flex-col shadow-lg shadow-[#00df9a] transition-shadow hover:bg-opacity-90 duration-[320ms] bg-gray-900 rounded-lg text-green-400 hover:bg-[#00df9a] hover:shadow-none hover:text-white"
30+
>
31+
<h2 className="text-center font-bold text-3xl px-4 py-6">
32+
{course.name}
33+
</h2>
34+
</a>
35+
{index < courses.length - 1 && (
36+
<div className="flex flex-col items-center">
37+
<img
38+
src={arrow}
39+
alt="arrow"
40+
className="hidden sm:block w-20 h-20"
41+
/>
42+
<img
43+
src={downarrow}
44+
alt="down arrow"
45+
className="block sm:hidden w-20 h-20"
46+
/>
47+
</div>
48+
)}
49+
</React.Fragment>
50+
))}
51+
</div>
52+
</div>
53+
);
6154
};
6255

63-
export default Frontend;
56+
export default Frontend;

0 commit comments

Comments
 (0)