Update the code demo for Link Overlay with a Routing Library

[arjunlubana]

Subject

LinkOverlay

Description

When trying to hoist a link in an encapsulating component. The code demo provided by the docs results in a Hydration Error. It is an issue that is closed in the core Chakra UI library here.

If this is done the docs way, the result wraps an tag inside another tag that results in the above hydration error.

To work around this in Next JS 13.

 <LinkBox as="article">
      <h2>
        <LinkOverlay as={NextLink} href="#" passHref>
          Some blog post
        </LinkOverlay>
      </h2>
      <p>
        As a side note, using quotation marks around an attribute value is
        required only if this value is not a valid identifier.
      </p>
      <a href="#">Some inner link</a>
    </LinkBox>

This would result in the following required output.

I have checked for any previous closed or related open issue. I have found none.
I would appreciate if I could change the docs demo code if possible.
Thank you.

[aacevski]

Thanks for reporting this issue, this can be worked on 🚀

[arjunlubana]

Can you please assign this to me?

[aacevski]

Done!

[arjunlubana]

I have fixed this in this PR #1355

[stale]

Hi!
This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.