Currently, I am working on a project component for my homepage that showcases a specific project. The goal is to have the entire component redirect to the project page when clicked, except when the user clicks on the GitHub icon. In that scenario, I want the GitHub link to open in a new tab without redirecting from the original project page. Below is the code snippet for the component:
"use client";
import Image from "next/image";
import Link from "next/link";
type ProjectType = {
img: string;
title: string;
slug: string;
desc: string;
overview: string;
role: string;
impact: string;
tags: Array<string>;
startDate: Date;
endDate: Date;
github?: string;
paper?: string;
link?: string;
area: string;
};
function Tag({ tag }: { tag: string }) {
return (
<div className=" duration-500 ease-in-out text-center text-sm rounded-full p-2 mr-4 mb-4 w-1/5 text-primary-white bg-primary-white bg-opacity-50 group-hover:bg-primary-color group-hover:bg-opacity-100 ">
{tag}
</div>
);
}
export default function ProjectFeatured({
project,
idx,
}: {
project: ProjectType;
idx: number;
}) {
const options = { month: "short" as const, year: "numeric" as const };
const isEven = idx % 2 == 0;
const classNameString =
"group w-full h-full p-12 rounded-3xl text-primary-white flex flex-col space-y-8 sm:space-y-0 sm:space-x-8 duration-500 ease-in-out hover:bg-primary-hover " +
(isEven ? "sm:flex-row" : "sm:flex-row-reverse sm:space-x-reverse");
return (
<Link href={"/projects/" + project.slug}>
<div className={classNameString}>
{/* Image */}
<div className="flex w-1/2 items-center justify-center">
<Image
className="object-cover h-full rounded-xl"
src={project.img}
alt="Project Image"
width={1000}
height={1000}
draggable={false}
/>
</div>
{/* Text */}
<div className="flex flex-col w-3/4 justify-between space-y-12">
{/* Title and desc */}
<div className="flex flex-col space-y-4">
{/* Title */}
<div>
<div className="text-xxl">{project.title}</div>
{/* <Image/> */}
</div>
{/* Desc */}
<div>{project.desc}</div>
</div>
{/* Tags and links */}
<div className="flex flex-col space-y-4">
{/* Tags */}
<div className="flex flex-row flex-wrap">
{project.tags.map((tag, idx) => (
<Tag tag={tag} key={idx} />
))}
</div>
{/* Links */}
<div className="flex flex-row space-x-2 ">
{project.github ? (
<a href={project.github} target="_blank" rel="noreferrer noopener" className="w-full">
<Image
className=" hover:animate-shrinkWiggle"
src={"svgs/github.svg"}
alt="Github Icon"
width={20}
height={20}
/>
</a>
) : (
<div />
)}
</div>
</div>
</div>
</div>
</Link>
);
}
I experimented with removing the target="_blank" attribute, but this method caused the GitHub icon to navigate to the GitHub page instead of opening it in a new tab like intended.