Add support for links in ItemCard and fix height of cards with tags vs cards without tags

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -25,13 +25,12 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
-import { generatePath, useNavigate } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
   const catalogApi = useApi(catalogApiRef);
-  const navigate = useNavigate();
 
   const { value, loading, error } = useAsync(async () => {
     const response = await catalogApi.getEntities();
@@ -80,15 +79,11 @@ export const TechDocsHome = () => {
             ? value.map((entity, index: number) => (
                 <Grid key={index} item xs={12} sm={6} md={3}>
                   <ItemCard
-                    onClick={() =>
-                      navigate(
-                        generatePath(rootDocsRouteRef.path, {
-                          namespace: entity.metadata.namespace ?? 'default',
-                          kind: entity.kind,
-                          name: entity.metadata.name,
-                        }),
-                      )
-                    }
+                    href={generatePath(rootDocsRouteRef.path, {
+                      namespace: entity.metadata.namespace ?? 'default',
+                      kind: entity.kind,
+                      name: entity.metadata.name,
+                    })}
                     title={entity.metadata.name}
                     label="Read Docs"
                     description={entity.metadata.description}