Merge pull request #421 from trilitech/link-tutorial-tiles

Make the whole tutorial tile a link

src/components/TutorialCard/index.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
 
 export default function TutorialCard({ title, href, description, link, emoji }) {
   return (
     <div className={clsx(styles.tutorialcard)}>
-      <div>
+      <Link href={href} target="_self" className={clsx(styles.tutorialcardlinkcontainer)}>
         <p className={clsx(styles.emoji)}>{emoji}</p>
         <h3 className={clsx(styles.title)}>{title}</h3>
         <p className={clsx(styles.description)}>{description}</p>
         <a href={href} className={clsx(styles.link)}>
           <p style={{ margin: 0 }}>{link}</p>
         </a>
-      </div>
+      </Link>
     </div>
   );
 }

src/components/TutorialCard/styles.module.css

@@ -13,11 +13,14 @@
 .tutorialcard:hover {
   border: 1px solid #787D82;
 }
+.tutorialcardlinkcontainer:hover {
+  text-decoration: none;
+}
 
 @media (max-width: 767px) {
   .tutorialcard {
-    width: calc(100% - 20px); 
-    margin: 10px 0; 
+    width: calc(100% - 20px);
+    margin: 10px 0;
   }
 }