Consolidate a place where to check linkProps (#1121)

**Related Ticket:** Very vaguely related to #946 

This PR makes the Card component delegate what link component to render
to the `SmartLink` component. I initially started working on this PR to
continue the work on #1096,
more specifically, to make the link component come from props. I thought
this change was worth merging regardless of whether we work on the
routing problem now or later.

app/scripts/components/common/card/index.tsx

@@ -11,13 +11,15 @@ import {
   themeVal,
   listReset,
 } from '@devseed-ui/theme-provider';
+import SmartLink from '../smart-link';
 import { CardBody, CardBlank, CardHeader, CardHeadline, CardTitle, CardOverline } from './styles';
 import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card';
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 
 import { ElementInteractive } from '$components/common/element-interactive';
 import { Figure } from '$components/common/figure';
-import { getLinkProps } from '$utils/url';
+
+
 
 type CardType = 'classic' | 'cover' | 'featured' | 'horizontal-info';
 
@@ -259,16 +261,20 @@ function CardComponent(props: CardComponentProps) {
   } = props;
 
   const isExternalLink = /^https?:\/\//.test(linkTo);
-  const linkProps = getLinkProps(linkTo, Link, onLinkClick);
-
 
   return (
     <ElementInteractive
+      linkProps={{
+        as: SmartLink,
+        to: linkTo,
+        onLinkClick
+      }}
       as={CardItem}
       cardType={cardType}
       className={className}
       linkLabel={linkLabel ?? 'View more'}
-      linkProps={linkProps}
+      linkTo={linkTo}
+      onLinkClick={onLinkClick}
       onClickCapture={onCardClickCapture}
     >
       {

app/scripts/components/common/smart-link.tsx

@@ -5,16 +5,18 @@ import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
+  onLinkClick?: ()=> void;
   children?: ReactNode;
 }
 
 /**
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, children, ...rest } = props;
+  const { to, onLinkClick, children, ...rest } = props;
   const isExternalLink = /^https?:\/\//.test(to);
-  const linkProps = getLinkProps(to);
+  const linkProps = getLinkProps(to, undefined, onLinkClick);
+
   return isExternalLink ? (
       <a {...linkProps} {...rest}> {children} </a>
   ) : (