169 lines
5.6 KiB
TypeScript
169 lines
5.6 KiB
TypeScript
import React, { PureComponent } from 'react'
|
|
import cx from 'classnames'
|
|
import styles from './CategoryImage.module.scss'
|
|
|
|
import agriculture from '../../img/categories/agriculture.jpg'
|
|
import anthroarche from '../../img/categories/anthroarche.jpg'
|
|
import astronomy from '../../img/categories/astronomy.jpg'
|
|
import biology from '../../img/categories/biology.jpg'
|
|
import business from '../../img/categories/business.jpg'
|
|
import chemistry from '../../img/categories/chemistry.jpg'
|
|
import communication from '../../img/categories/communication.jpg'
|
|
import computer from '../../img/categories/computer.jpg'
|
|
import dataofdata from '../../img/categories/dataofdata.jpg'
|
|
import deeplearning from '../../img/categories/deeplearning.jpg'
|
|
import demographics from '../../img/categories/demographics.jpg'
|
|
import earth from '../../img/categories/earth.jpg'
|
|
import economics from '../../img/categories/economics.jpg'
|
|
import engineering from '../../img/categories/engineering.jpg'
|
|
import history from '../../img/categories/history.jpg'
|
|
import imagesets from '../../img/categories/imagesets.jpg'
|
|
import language from '../../img/categories/language.jpg'
|
|
import law from '../../img/categories/law.jpg'
|
|
import mathematics from '../../img/categories/mathematics.jpg'
|
|
import medicine from '../../img/categories/medicine.jpg'
|
|
import other from '../../img/categories/other.jpg'
|
|
import performingarts from '../../img/categories/performingarts.jpg'
|
|
import philosophy from '../../img/categories/philosophy.jpg'
|
|
import physics from '../../img/categories/physics.jpg'
|
|
import politics from '../../img/categories/politics.jpg'
|
|
import psychology from '../../img/categories/psychology.jpg'
|
|
import sociology from '../../img/categories/sociology.jpg'
|
|
import sports from '../../img/categories/sports.jpg'
|
|
import theology from '../../img/categories/theology.jpg'
|
|
import transport from '../../img/categories/transport.jpg'
|
|
import urbanplanning from '../../img/categories/urbanplanning.jpg'
|
|
import visualart from '../../img/categories/visualart.jpg'
|
|
import aiforgood from '../../img/aiforgood.jpg'
|
|
import fallback from '@oceanprotocol/art/jellyfish/jellyfish-back.svg'
|
|
|
|
const categoryImageFile = (category: string) => {
|
|
switch (category) {
|
|
case 'Agriculture & Bio Engineering':
|
|
case 'agriculture':
|
|
return agriculture
|
|
case 'Anthropology & Archeology':
|
|
case 'anthroarche':
|
|
return anthroarche
|
|
case 'Space & Astronomy':
|
|
case 'astronomy':
|
|
return astronomy
|
|
case 'Biology':
|
|
case 'biology':
|
|
return biology
|
|
case 'Business & Management':
|
|
case 'business':
|
|
return business
|
|
case 'Chemistry':
|
|
case 'chemistry':
|
|
return chemistry
|
|
case 'Communication & Journalism':
|
|
case 'communication':
|
|
return communication
|
|
case 'Computer Technology':
|
|
case 'computer':
|
|
return computer
|
|
case 'Dataset Of Datasets':
|
|
case 'dataofdata':
|
|
return dataofdata
|
|
case 'Deep Learning':
|
|
case 'deeplearning':
|
|
return deeplearning
|
|
case 'Demography':
|
|
case 'demographics':
|
|
return demographics
|
|
case 'Earth & Climate':
|
|
case 'earth':
|
|
return earth
|
|
case 'Economics & Finance':
|
|
case 'economics-and-finance':
|
|
return economics
|
|
case 'Engineering':
|
|
case 'engineering':
|
|
return engineering
|
|
case 'History':
|
|
case 'history':
|
|
return history
|
|
case 'Image Recognition':
|
|
case 'imagesets':
|
|
return imagesets
|
|
case 'Language':
|
|
case 'language':
|
|
return language
|
|
case 'Law':
|
|
case 'law':
|
|
return law
|
|
case 'Mathematics':
|
|
case 'mathematics':
|
|
return mathematics
|
|
case 'Medicine':
|
|
case 'Health & Medicine':
|
|
case 'Health':
|
|
case 'medicine':
|
|
return medicine
|
|
case 'Other':
|
|
case 'other':
|
|
return other
|
|
case 'Performing Arts':
|
|
case 'performingarts':
|
|
return performingarts
|
|
case 'Philosophy':
|
|
case 'philosophy':
|
|
return philosophy
|
|
case 'Physics & Energy':
|
|
case 'physics':
|
|
return physics
|
|
case 'Politics':
|
|
case 'politics':
|
|
return politics
|
|
case 'Psychology':
|
|
case 'psychology':
|
|
return psychology
|
|
case 'Sociology':
|
|
case 'sociology':
|
|
return sociology
|
|
case 'Sports & Recreation':
|
|
case 'sports':
|
|
return sports
|
|
case 'Theology':
|
|
case 'theology':
|
|
return theology
|
|
case 'Transportation':
|
|
case 'transport':
|
|
return transport
|
|
case 'Urban Planning':
|
|
case 'urbanplanning':
|
|
return urbanplanning
|
|
case 'Visual Arts & Design':
|
|
case 'visualart':
|
|
return visualart
|
|
// technically no category
|
|
// but corresponding to title of a channel
|
|
case 'AI For Good':
|
|
return aiforgood
|
|
default:
|
|
return fallback
|
|
}
|
|
}
|
|
|
|
export default class CategoryImage extends PureComponent<{
|
|
category: string
|
|
header?: boolean
|
|
dimmed?: boolean
|
|
}> {
|
|
public render() {
|
|
const image = categoryImageFile(this.props.category)
|
|
const classNames = cx(styles.categoryImage, {
|
|
[styles.header]: this.props.header,
|
|
[styles.dimmed]: this.props.dimmed
|
|
})
|
|
|
|
return (
|
|
<div
|
|
className={classNames}
|
|
style={{ backgroundImage: `url(${image})` }}
|
|
/>
|
|
)
|
|
}
|
|
}
|