Theo's Typesafe Cult•11mo ago

Links within one another (nextjs)

Hey, having a problem with having link buttons within each other. When I try to give the bottom button with MdSettings icon props as={Link} and href it breaks the entire thing. But when i remove the as={Link} from the parent Card component, It works. how do you have two links within each other?

{projects?.map((project) => 
<>
<Card as={Link} href={`/dashboard/${project.id}`} className="dark:bg-[#171717] rounded-md border dark:border-neutral-800 p-2 group hover:cursor-pointer dark:hover:border-neutral-600 transition-colors">
  <CardHeader className="flex justify-between">
    <div className="flex flex-col gap-1">
      <span className="font-bold">{project.title}</span>
      <span className="opacity-50 font-mono">{formatDate(project.created_at)}</span>
    </div>
    <ChevronRightIcon className="w-4 h-4 absolute top-6 right-5 group-hover:translate-x-1 transition-transform"/>
  </CardHeader>
  
  <CardBody></CardBody>
                        
  <CardFooter className="flex justify-between">
    <Chip color="warning" variant="dot">Next Due Date:</Chip>
    <div className="flex gap-2">
      <Button variant="light" isIconOnly><InfoIcon className="w-4 h-4"/></Button>
      <Button as={Link} href={`/settings/${project.id}`} variant="light" isIconOnly><MdSettings className="w-4 h-4"/></Button>
    </div>
</CardFooter>
</Card>
</>)}

{projects?.map((project) => 
<>
<Card as={Link} href={`/dashboard/${project.id}`} className="dark:bg-[#171717] rounded-md border dark:border-neutral-800 p-2 group hover:cursor-pointer dark:hover:border-neutral-600 transition-colors">
  <CardHeader className="flex justify-between">
    <div className="flex flex-col gap-1">
      <span className="font-bold">{project.title}</span>
      <span className="opacity-50 font-mono">{formatDate(project.created_at)}</span>
    </div>
    <ChevronRightIcon className="w-4 h-4 absolute top-6 right-5 group-hover:translate-x-1 transition-transform"/>
  </CardHeader>
  
  <CardBody></CardBody>
                        
  <CardFooter className="flex justify-between">
    <Chip color="warning" variant="dot">Next Due Date:</Chip>
    <div className="flex gap-2">
      <Button variant="light" isIconOnly><InfoIcon className="w-4 h-4"/></Button>
      <Button as={Link} href={`/settings/${project.id}`} variant="light" isIconOnly><MdSettings className="w-4 h-4"/></Button>
    </div>
</CardFooter>
</Card>
</>)}

Solution:

In HTML it is illegal to have an anchor tag (link element) inside another link element, or more generally you cannot nest two interactive elements (so this also applies to buttons). From a UX perspective this makes sense, generally layered buttons result in poor user experiences, but sometimes are un-avoidable, hell even my project does this at times. The solution is to make your parent card a div element with a relative css atribute, and then have an inner div that takes up the entire space of the card as the link and a sibling component (another component on the same level) that is an absolutely positioned link that is placed wherever you want it to go. It should look something like this ```tsx ... return ( <Card className='relative' ...>...

Jump to solution

3 Replies

ATOMowy_grzyb•11mo ago

my goodness, what is you line length, can you make that snippet readable?

Crim•11mo ago

sorry, I made it more readable

Solution

Josh•11mo ago

...
return (
  <Card className='relative' ...>
    <Link className='h-full w-full'>...</div>
    <Link className='absolute z-10 bottom-4 right-4'>...</div>
  </Card>
)

...
return (
  <Card className='relative' ...>
    <Link className='h-full w-full'>...</div>
    <Link className='absolute z-10 bottom-4 right-4'>...</div>
  </Card>
)

Gaming

Programming

Links within one another (nextjs)