Use list on landing page

eea · Dec 2, 2022 · 0f68ed1 · 0f68ed1
1 parent 7f99158
commit 0f68ed1
Showing 1 changed file with 11 additions and 19 deletions.
diff --git a/src/components/LandingPage/DatahubLandingPage.jsx b/src/components/LandingPage/DatahubLandingPage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Tab, Card, Menu, Divider } from 'semantic-ui-react';
+import { Tab, Menu, Divider, List } from 'semantic-ui-react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useAtom } from 'jotai';
 
@@ -176,7 +176,7 @@ const LandingPage = (props) => {
           return (
             <Tab.Pane>
               <div className="landing-page-cards">
-                <Card.Group itemsPerRow={5}>
+                <List>
                   {sortedTiles(tiles, activeSectionConfig, appConfig).map(
                     (topic, index) => {
                       const onClickHandler = () => {
@@ -203,28 +203,20 @@ const LandingPage = (props) => {
                       };
 
                       return (
-                        <Card onClick={onClickHandler} key={index}>
-                          <Card.Content>
-                            <Card.Header>
-                              {icon ? (
-                                <Icon {...icon} type={topic.value} />
-                              ) : (
-                                ''
-                              )}
-                              <Term term={topic.value} field={activeSection} />
-                            </Card.Header>
-                          </Card.Content>
-                          <Card.Content extra>
+                        <List.Item onClick={onClickHandler} key={index}>
+                          <List.Content>
+                            {icon ? <Icon {...icon} type={topic.value} /> : ''}
+                            <Term term={topic.value} field={activeSection} />
                             <span className="count">
-                              {topic.count}{' '}
-                              {topic.count === 1 ? 'item' : 'items'}
+                              ({topic.count}{' '}
+                              {topic.count === 1 ? 'item' : 'items'})
                             </span>
-                          </Card.Content>
-                        </Card>
+                          </List.Content>
+                        </List.Item>
                       );
                     },
                   )}
-                </Card.Group>
+                </List>
               </div>
             </Tab.Pane>
           );