oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

categories, show from category on homepage

Browse Source
This commit is contained in:
Jernej Pregelj 2019-05-15 15:15:43 +02:00 committed by Matthias Kretschmann
parent 9795e6e642
commit 13c2c9b68a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/routes/Home.module.scss
View File

@ -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;
}
}

69
client/src/routes/Home.tsx
View File

@ -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>
{this.state.categoryAssets.map((asset: any) => (
<div key={asset.id}>{asset.id}</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) => (
<Asset key={asset.id} asset={asset} />
))}
</div>
) : (
<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>
category lists
</Route>
)
}