Implement Navigation.tsx

[ysh0305]

MORE CHALLENGING ISSUE. WORK WITH QUIN IF YOU HAVE ANY QUESTION ON WHAT EACH LINE OF CODE DOES

Number of props: 0
Location: All Pages
Number of Images: 1, logo.webp
React Icon: Yes

Description: When doing this component please rely on the example, there should be a lot of copy and paste from the example. This component should include the logo on the left linked to the home page, all the tabs on the right linked to its corresponding pages and an blue underline. The tabs should be mapped using navigation.js an array that contains all tabs' name and their links (you will implement this). When the user hovers over the logo, the opacity should go down. When the user hovers over the tab, the text should turn brown. When the user select the tab, there should be a brown underline under the text, the text will stay brown, and should switch to the corresponding page. All components with click or hover transition should have duration implemented such as "duration-300" On mobile, the navbar should collapse into an icon. Check example

PATH:

1. /src/components/Navigation.tsx
2. /src/data/navigation.js (I forgot to create the file, so just create one yourself)

Example