Links not working in only some components

[ahmed27037]

Link to the code that reproduces this issue

https://github.com/ahmed27037/portoflio-space-theme/blob/master/components/main/sub/ProjectCard.tsx

To Reproduce

Make a button or Link component in ProjectCard.tsx or HeroContent.tsx and check if you can click your link it wont work there (ProjectCard.tsx is a component used in HardProjects.tsx and SoftProjects.tsx which you can see in layout.tsx)
Put that same button or link component in NavBar.tsx and it should work fine

Current vs. Expected behavior

Expected: The link should take you to the href
Current: it does in NavBar.tsx but not in HeroContent or ProjectCard.tsx

Code Problem:
ProjectCard.tsx
{href && (
<Button
className="z-10"
size="small"
href={href} // Link to the website
target="_blank"
rel="noopener noreferrer" // Security best practice
variant="contained"
sx={{ backgroundColor: "#007BFF", ":hover": { backgroundColor: "#0056b3" } }}
>
Website

)}
{github && (
<Button
className="z-10"
size="small"
href={github} // Link to the GitHub repository (corrected this line)
target="_blank"
rel="noopener noreferrer" // Security best practice
variant="contained"
sx={{ backgroundColor: "green", ":hover": { backgroundColor: "#0056b3" } }}
>
Github

Provide environment information

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@heroicons/react": "^2.0.18",
    "@mui/icons-material": "^6.1.2",
    "@mui/material": "^6.1.2",
    "next": "^14.2.14",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^4.12.0"
  },
  "devDependencies": {
    "@react-three/drei": "^9.92.1",
    "@react-three/fiber": "^8.15.12",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "^14.2.14",
    "framer-motion": "^10.16.16",
    "postcss": "^8",
    "react-intersection-observer": "^9.5.3",
    "tailwindcss": "^3.3.0",
    "three": "^0.159.0",
    "typescript": "^5"
  }
}

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I didn't deploy my project so you would have to test it locally by doing git clone then npm run dev and the website should work.

[frontcodelover]

From what you’re describing, it seems like the issue is related to how your buttons and links are implemented in ProjectCard.tsx and HeroContent.tsx, even though they work in NavBar.tsx. This could be related to the structure of your code or how Next.js handles link tags and interactivity.

Here are a few potential solutions:

1. Verify MUI Button Behavior

Since you're using Material UI (MUI), buttons with href act as anchor () elements. This means you could run into issues if you're not using the correct component for external links.

Make sure you’re using Next.js' Link for internal navigation and for external links.

Possible Fix in ProjectCard.tsx:

{href` && (
  <Button
    className="z-10"
    size="small"
    component="a" // Use <a> for external links
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    variant="contained"
    sx={{ backgroundColor: "#007BFF", ":hover": { backgroundColor: "#0056b3" }}
  >
    Website
  </Button>
)}
{github && (
  <Button
    className="z-10"
    size="small"
    component="a" // Same for GitHub link
    href={github}
    target="_blank"
    rel="noopener noreferrer"
    variant="contained"
    sx={{ backgroundColor: "green", ":hover": { backgroundColor: "#0056b3" }}
  >
    GitHub
  </Button>
)}

2. Use Next.js Link for Internal Navigation

For internal navigation, it's better to use Next.js' Link component, which handles client-side routing optimization. You can wrap the MUI button with a Link.

import Link from 'next/link';

{href && (
  <Link href={href} passHref>
    <Button
      className="z-10"
      size="small"
      variant="contained"
      sx={{ backgroundColor: "#007BFF", ":hover": { backgroundColor: "#0056b3" }}
    >
      Website
    </Button>
  </Link>
)}

3. Remove z-index

You’re using the class z-10 on your buttons, but it’s possible that some elements above them are blocking interactions. Check the parent components to ensure no other elements with higher z-indexes or positioning (absolute, fixed) are interfering.

Let me know if it's ok or not ;)

[ahmed27037]

I tried and nothing really changes:

Its not a problem with my link component as whether i use the one from next js or material ui it wont work. whereas i can use any of them in the navbar

Recording.2024-10-04.012410.mp4

My Code:
"use client"

import React from "react";
import { Card, CardActions, CardContent, CardMedia, Button, Typography, Box } from "@mui/material";

interface Props {
src: string;
src2?: string;
src3?: string;
src4?: string;
src5?: string;
title: string;
description: string;
href?: string; // Link to the website
github?: string; // Link to the GitHub repository
}

// Utility function to split description into chunks of 50 words
const splitDescription = (description: string, chunkSize: number) => {
const words = description.split(" ");
const chunks = [];
for (let i = 0; i < words.length; i += chunkSize) {
chunks.push(words.slice(i, i + chunkSize).join(" "));
}
return chunks;
};

const ProjectCard = ({ src, src2, src3, src4 ,src5, title, description, href, github }: Props) => {
// Split the description into chunks of 50 words
const descriptionChunks = splitDescription(description, 50);

return (

<Card sx={{ backgroundColor: "#1a1a1a", color: "white", borderRadius: 2 }}>
{/* Image Section: Flexbox to align images side by side /}

{/ First Image */}
<CardMedia
component="img"
height="200"
image={src}
alt={title}
sx={{ width: "48%", objectFit: "cover", borderRadius: 2 }}
/>

    {src2 && (
      <CardMedia
        component="img"
        height="200"
        image={src2}
        alt={`${title} - additional`}
        sx={{ width: "48%", objectFit: "cover", borderRadius: 2 }}
      />
    )}
    {src3 && (
      <CardMedia
        component="img"
        height="50"
        image={src3}
        alt={`${title} - additional`}
        sx={{ width: "48%", objectFit: "cover", borderRadius: 2 }}
      />
    )}
    {src4 && (
      <CardMedia
        component="img"
        height="50"
        image={src4}
        alt={`${title} - additional`}
        sx={{ width: "48%", objectFit: "cover", borderRadius: 2 }}
      />
    )}
    {src5 && (
      <CardMedia
        component="img"
        height="50"
        image={src5}
        alt={`${title} - additional`}
        sx={{ width: "48%", objectFit: "cover", borderRadius: 2 }}
      />
    )}
  </Box>

  {/* Card Content */}
  <CardContent>
    <Typography gutterBottom variant="h5" component="div">
      {title}
    </Typography>

    {/* Render description with gradient lines after each 50-word chunk */}
    {descriptionChunks.map((chunk, index) => (
      <React.Fragment key={index}>
        <Typography variant="body2" sx={{ fontSize: "1.2rem", color: "grey.400" }}>
          {chunk}
        </Typography>
        {/* Gradient Line */}
        {index < descriptionChunks.length - 1 && (
          <Box
            sx={{
              height: "2px",
              background: "linear-gradient(to right, yellow, darkorange)",
              marginY: 2,
            }}
          />
        )}
      </React.Fragment>
    ))}
  </CardContent>

  {/* Action Buttons */}
  <CardActions>

  {href && (
      <Button
        size="small"
        component = "a"
        href={href} // Link to the website
        target="_blank"
        rel="noopener noreferrer" // Security best practice
        variant="contained"
        sx={{ backgroundColor: "#007BFF", ":hover": { backgroundColor: "#0056b3" } }}
      >
        Website
      </Button>
    )}
    {github && (
      <Button
        size="small"
        component="a"
        href={github} // Link to the GitHub repository (corrected this line)
        target="_blank"
        rel="noopener noreferrer" // Security best practice
        variant="contained"
        sx={{ backgroundColor: "green", ":hover": { backgroundColor: "#0056b3" } }}
      >
        Github
      </Button>
    )}
  </CardActions>
</Card>
</div>

);
};

export default ProjectCard;