Fixed issues with inability to open links in new window when clicking…

… the external link icon in a card.

src/components/Card/index.tsx

@@ -1,12 +1,13 @@
 import { IconExternalLink } from "@nasa-jpl/react-stellar";
 import { Pill } from "../../components/Pill";
+import { Link } from "react-router-dom";
 
 export type CardProps = {
   description:string;
   route:string;
   title:string;
   type:string;
-  url?:string;
+  url:string;
 }
 
 export const Card = ({
@@ -16,21 +17,27 @@ export const Card = ({
   type,
   url
 }:CardProps) => {
+
+  const onClickExternalHandler = (event:React.SyntheticEvent) => {
+    // Stop Propgation of event to parent card element; otherwise,
+    // the user will be navigated to the parent card route
+    if(event && event.stopPropagation) event.stopPropagation(); 
+  }
+
   return (
-    <a href={route}>
+    <Link to={route}>
       <span className="unity-card">
         <span className="header">
           <span className="title">{title}</span>
-          { url && <span className="icons">
-            <a href={url} target={"_blank"}><IconExternalLink /></a>
+          <span className="icons">
+            <Link to={url} target={"_blank"} onClick={ (e) => {onClickExternalHandler(e)}}><IconExternalLink /></Link>
           </span>
-          }
         </span>
         <div className="description">{description}</div>
         <div className="footer">
           <Pill label={type}/>
         </div>
       </span>
-    </a>
+    </Link>
   )
 }

src/routes/home/index.tsx

@@ -32,12 +32,14 @@ function Home() {
       route={"/health-dashboard"}
       title="Health Dashboard"
       type={"web"}
+      url={"/health-dashboard"}
     />,
     <Card
       description="Documentation to help become familiar with the Unity platform."
       route={"https://unity-sds.gitbook.io/docs"}
       title="Documentation (Gitbook)"
       type={"web"}
+      url={"https://unity-sds.gitbook.io/docs"}
     />
   );