Allow opening original link on a new tab without losing focus

[DannieBGoode]

When using the Web Interface, allow middle click to open the original link which should open the link on the background on a new tab.

To do this, my recommendation is to change the <Button> component to another one (ie <ButtonLink >) that uses a element inside since those elements are prepared for link manipulation by the browser defaults.

In order to do this a new <ButtonLink> component could be used. This component would live in packages/web/components/elements/ButtonLink.tsx and would look something like this:

import { styled, theme } from '../tokens/stitches.config'

export const ButtonLink = styled('a', {
  fontFamily: 'inter',
  fontSize: '$2',
  lineHeight: '1.25',
  color: '$grayText',
  textDecoration: 'none', // Ensures it doesn't look like a traditional link
  variants: {
    style: {
      ctaYellow: {
        borderRadius: '$3',
        px: '$3',
        py: '$2',
        border: '1px solid $yellow3',
        bg: '$yellow3',
        '&:hover': {
          bg: '$yellow4',
          border: '1px solid $grayBorderHover',
        },
      },
      // All other styles remain the same as the ones for <Button>, copying directly from your original button styles
      // ctaOmnivoreYellow, ctaBlue, etc.
    },
  },
  defaultVariants: {
    style: 'ctaWhite',
  },
});

and could be used here like this:

<ButtonLink
  title="Open original (o)"
  style="hoverActionIcon"
  href="https://example.com" // replace with actual URL
  target="_blank"
  rel="noopener noreferrer"
>
  Open Original
</ButtonLink>