Guides listing

components/links-list-item.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Badge, Flex, Link, Text } from '@chakra-ui/react';
 
 type LinksListItemProps = {
+  href: string;
   title: string;
   subtitle: string;
   badgeText?: string;
@@ -10,10 +11,11 @@ type LinksListItemProps = {
 };
 
 export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href } = props;
 
   return (
     <Link
+      href={href}
       fontSize={['14px', '14px', '15px']}
       py='9px'
       d='flex'

content/guides.json

@@ -20,7 +20,7 @@
     "createdAt": "2020-07-01T19:59:14.191Z"
   },
   {
-    "title": "OAuth — Open Authorization",
+    "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
     "url": "/guides/oauth",
     "fileName": "oauth",

pages/index.tsx

@@ -66,6 +66,7 @@ export default function Home(props: HomeProps) {
             {guides.map(guide => (
               <LinksListItem
                 key={guide.url}
+                href={guide.url}
                 title={guide.title}
                 badgeText={guide.isPro ? 'PRO' : ''}
                 subtitle={guide.formattedUpdatedAt}