Skip to content

Commit

Permalink
Fix: Footer Social Media Links (Twitter, LinkedIn) Not Opening in New…
Browse files Browse the repository at this point in the history 
… Tabs (AOSSIE-Org#248)
  • Loading branch information
@yashsaraswat2004
yashsaraswat2004 committed Sep 17, 2024
1 parent 4383ee5 commit c628d4a
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 18 deletions.
61 changes: 48 additions & 13 deletions src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import Link from 'next/link'
import { Container } from '@/components/Container'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
import {
faDiscord,
faGithub,
faGitlab,
faTwitter,
} from '@fortawesome/free-brands-svg-icons'

function NavLink({ href, children }) {
return (
Expand All @@ -23,30 +28,60 @@ export function Footer() {
<div className="pt-10 pb-10">
<Container.Inner>
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
<div className="text-md flex gap-5 font-mono font-semibold text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
</div>
<p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
<p className="font-mono text-sm text-zinc-400 dark:text-zinc-500">
&copy; 2016-2023 AOSSIE. All rights reserved.
</p>
<div className="flex gap-6">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />
<Link
aria-label="Contact by Mail"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faEnvelope} size="xl" />
</Link>
<Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
<FontAwesomeIcon icon={faGitlab} size='xl' />
<Link
aria-label="Follow on GitLab"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://gitlab.com/aossie"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGitlab} size="xl" />
</Link>
<Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
<FontAwesomeIcon icon={faGithub} size='xl' />
<Link
aria-label="Follow on GitHub"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://github.com/AOSSIE-Org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGithub} size="xl" />
</Link>
<Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
<FontAwesomeIcon icon={faDiscord} size='xl' />
<Link
aria-label="Join on Discord"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://discord.com/invite/6mFZ2S846n"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faDiscord} size="xl" />
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
<Link
aria-label="Follow on Twitter"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://twitter.com/aossie_org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faTwitter} size="xl" />
</Link>
</div>
</div>
Expand Down
20 changes: 15 additions & 5 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,36 +53,46 @@ export default function Home() {
<div className="mt-6 ml-4 flex gap-6">
<Link
aria-label="Contact by Mail"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faEnvelope} size="2xl" />
</Link>
<Link
aria-label="Follow on GitLab"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://gitlab.com/aossie"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGitlab} size="2xl" />
</Link>
<Link
aria-label="Follow on GitHub"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://github.com/AOSSIE-Org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGithub} size="2xl" />
</Link>
<Link
aria-label="Join on Discord"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://discord.com/invite/6mFZ2S846n"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faDiscord} size="2xl" />
</Link>
<Link
aria-label="Follow on Twitter"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://twitter.com/aossie_org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faTwitter} size="2xl" />
</Link>
Expand Down

0 comments on commit c628d4a

Please sign in to comment.