81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import moment from 'moment'
|
|
import Dotdotdot from 'react-dotdotdot'
|
|
import cx from 'classnames'
|
|
import styles from './AssetTeaser.module.scss'
|
|
import CategoryImage from '../atoms/CategoryImage'
|
|
import { allowPricing } from '../../config'
|
|
import Web3 from 'web3'
|
|
|
|
const AssetTeaser = ({
|
|
asset,
|
|
list,
|
|
minimal
|
|
}: {
|
|
asset: any
|
|
list?: boolean
|
|
minimal?: boolean
|
|
}) => {
|
|
if (!asset.findServiceByType) return null
|
|
|
|
const { attributes } = asset.findServiceByType('metadata')
|
|
const { main, additionalInformation } = attributes
|
|
|
|
return list ? (
|
|
<article className={styles.assetList}>
|
|
<Link to={`/asset/${asset.id}`}>
|
|
<h1>{main.name}</h1>
|
|
<div
|
|
className={styles.date}
|
|
title={`Published on ${main.datePublished}`}
|
|
>
|
|
{moment(main.datePublished, 'YYYYMMDD').fromNow()}
|
|
</div>
|
|
</Link>
|
|
</article>
|
|
) : (
|
|
<article
|
|
className={
|
|
minimal ? cx(styles.asset, styles.minimal) : styles.asset
|
|
}
|
|
>
|
|
<Link to={`/asset/${asset.id}`}>
|
|
{additionalInformation &&
|
|
additionalInformation.categories &&
|
|
!minimal && (
|
|
<CategoryImage
|
|
dimmed
|
|
category={additionalInformation.categories[0]}
|
|
/>
|
|
)}
|
|
<h1>{main.name}</h1>
|
|
|
|
{additionalInformation && !minimal && (
|
|
<div className={styles.description}>
|
|
<Dotdotdot clamp={3}>
|
|
{additionalInformation.description}
|
|
</Dotdotdot>
|
|
</div>
|
|
)}
|
|
<footer className={styles.assetFooter}>
|
|
{additionalInformation &&
|
|
additionalInformation.categories && (
|
|
<div>{additionalInformation.categories[0]}</div>
|
|
)}
|
|
{allowPricing && (
|
|
<div className={styles.price}>
|
|
<span>
|
|
{Web3.utils.fromWei(main.price.toString())}
|
|
</span>{' '}
|
|
OCEAN
|
|
</div>
|
|
)}
|
|
</footer>
|
|
</Link>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default AssetTeaser
|