categories, show from category on homepage

client/src/routes/Home.module.scss

@@ -12,4 +12,20 @@
         margin: 0;
         visibility: hidden;
     }
+
+    .results {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-gap: $spacer;
+
+        @media (min-width: $break-point--small) {
+            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+        }
+    }
+
+    .categories {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        grid-gap: $spacer;
+    }
 }

client/src/routes/Home.tsx

@@ -1,6 +1,9 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { User } from '../context'
 import { Logger } from '@oceanprotocol/squid'
+import Spinner from '../components/atoms/Spinner'
+import Asset from '../components/molecules/Asset'
+import CategoryImage from '../components/atoms/CategoryImage'
 import Button from '../components/atoms/Button'
 import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
@@ -20,6 +23,43 @@ interface HomeState {
     isLoading?: boolean
 }
 
+const categories = [
+    'AI For Good',
+    'Image Recognition',
+    'Dataset Of Datasets',
+    'Language',
+    'Performing Arts',
+    'Visual Arts & Design',
+    'Philosophy',
+    'History',
+    'Theology',
+    'Anthropology & Archeology',
+    'Sociology',
+    'Psychology',
+    'Politics',
+    'Interdisciplinary',
+    'Economics & Finance',
+    'Demography',
+    'Biology',
+    'Chemistry',
+    'Physics & Energy',
+    'Earth & Climate',
+    'Space & Astronomy',
+    'Mathematics',
+    'Computer Technology',
+    'Engineering',
+    'Agriculture & Bio Engineering',
+    'Transportation',
+    'Urban Planning',
+    'Medicine',
+    'Business & Management',
+    'Sports & Recreation',
+    'Communication & Journalism',
+    'Deep Learning',
+    'Law',
+    'Other'
+]
+
 class Home extends Component<HomeProps, HomeState> {
     public state = {
         search: '',
@@ -82,11 +122,32 @@ class Home extends Component<HomeProps, HomeState> {
                     />
                 </Form>
                 <div>
+                    <h4>AI for Good</h4>
+                    <div>
+                        {
+                            this.state.isLoading ? (
+                                <Spinner message="Loading..." />
+                            ) : this.state.categoryAssets && this.state.categoryAssets.length ? (
+                                <div className={styles.results}>
                                     {this.state.categoryAssets.map((asset: any) => (
-                        <div key={asset.id}>{asset.id}</div>
+                                        <Asset key={asset.id} asset={asset} />
                                     ))}
                                 </div>
-                category lists
+                            ) : (
+                                <div>No data sets found.</div>
+                            )
+                        }
+                    </div>
+                    <h4>Explore Categories</h4>
+                    <div className={styles.categories}>
+                        {categories.map((category: string) => (
+                            <div key={category}>
+                                <CategoryImage category={category}/>
+                                {category}
+                            </div>
+                        ))}
+                    </div>
+                </div>
             </Route>
         )
     }