Skip to content

React1 week2/gayathri #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

React1 week2/gayathri #240

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5a21368
Initial set up completed for react1-week1 homework
GayathriVenkatraman Mar 17, 2025
01126f6
Added list for LinkedIN
GayathriVenkatraman Mar 18, 2025
e26acc1
Imported and used Footer component
GayathriVenkatraman Mar 18, 2025
4f9e611
Created separate OurValues.js file and added the description
GayathriVenkatraman Mar 18, 2025
b287c24
Imported and used OurValues.js in OurValues components
GayathriVenkatraman Mar 18, 2025
53ac28b
Styling done for OurValues
GayathriVenkatraman Mar 18, 2025
a723e88
OurCrew page is created and imported
GayathriVenkatraman Mar 19, 2025
90e9a4c
OurPartners.js page created and imported
GayathriVenkatraman Mar 19, 2025
ce7f9df
homework completed
GayathriVenkatraman Mar 19, 2025
dc41474
initial setup
GayathriVenkatraman Mar 24, 2025
6858015
Created <NavItem /> Component
GayathriVenkatraman Mar 25, 2025
edb9e6f
add social media icons in public folder
GayathriVenkatraman Mar 25, 2025
5b67976
Created Pages and SocialMediaItem components
GayathriVenkatraman Mar 25, 2025
78a1880
Added styling for social media icons
GayathriVenkatraman Mar 25, 2025
0213e0d
Separate PlanetWishlistItem.js file created
GayathriVenkatraman Mar 26, 2025
28e032d
Separate PlanetCard file is created
GayathriVenkatraman Mar 26, 2025
3b52184
planets are included
GayathriVenkatraman Mar 26, 2025
ba046e9
Corrected the bug on return based on review comments
GayathriVenkatraman Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 64 additions & 31 deletions react/react1/week2/components/ui/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,61 @@
"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import styles from "./Footer.module.css";

const navbarItems = [
{
title: "ABOUT_US",
link: "/about_us",
},
{
title: "DESTINATION",
link: "/destination",
},
{
title: "NASA COLLABORATION",
link: "/nasa_collaboration",
},
];

const socialMediaLinks = [
{
title: "Facebook",
url: "https://facebook.com",
icon: "/socialmedia/facebook.png",
},
{
title: "Instagram",
url: "https://instagram.com",
icon: "/socialmedia/instagram.jpeg",
},
{
title: "TikTok",
url: "https://tiktok.com",
icon: "/socialmedia/tiktok.png",
},
{
title: "On the streets at night",
url: "https://google.com",
icon: "/socialmedia/google.png",
},
{
title: "LinkedIn",
url: "https://www.linkedin.com/",
icon: "/socialmedia/linkedin.png",
},
];

const SocialMediaItem = ({ url, title, icon }) => (
<li>
<a href={url} target="_blank">
<img src={icon} alt={`${title} icon`} className={styles.socialIcon} />
{title}
</a>
</li>
);

export const Footer = () => {
const path = usePathname().split("?")[0];
return (
Expand All @@ -15,44 +68,24 @@ export const Footer = () => {
</p>
<p>&copy; 2024 Galactica. All rights reserved.</p>
</div>
{/* TASK - React 1 week 2 */}
{/* Create a new List for the Pages */}
{/* We need to use the <Link /> component here */}
{/* <div className={styles.pages}>

<div className={styles.pages}>
<h3>Pages</h3>
<ul>
<li> <Link/> </li>
...
{navbarItems.map((item) => (
<li key={item.link}>
<Link href={item.link}>{item.title}</Link>
</li>
))}
</ul>
</div> */}
{/* Docs for the Link: https://nextjs.org/docs/pages/api-reference/components/link */}
</div>

{/* TASK - React 1 week 1 */}
{/* Add a new list item for LINKEDIN */}
<div className={styles.footerLinks}>
<h3>Follow us</h3>
<ul className={styles.footerList}>
<li>
<a href="https://facebook.com">Facebook</a>
</li>
<li>
<a href="https://instagram.com">Instagram</a>
</li>
<li>
<a href="https://tiktok.com">Tiktok</a>
</li>
<li>
<a href="https://google.com">On the streets at night</a>
</li>
{/*Added new list for LinkedIN */}
<li>
<a href="https://www.linkedin.com/">LinkedIN</a>
</li>
{/* TASK - React 1 week 2 */}
{/* Create a <SocialMediaItem /> component and replace all of the list items! */}
{/* it should accept the following props */}
{/* url, title, icon */}
{/* For the icons, you can download 1-2 social media icons for testing and put it in the /public/socialmedia/ folder */}
{socialMediaLinks.map((social) => (
<SocialMediaItem key={social.url} {...social} />
))}
</ul>
</div>
</footer>
Expand Down