You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
66 lines
1.7 KiB
import React, { Component } from "react"
|
|
import { Link } from "react-router-dom"
|
|
import moment from "moment"
|
|
|
|
import "./css/List.css"
|
|
|
|
export default class List extends Component {
|
|
render() {
|
|
return (
|
|
<table className="List" cellSpacing="0px">
|
|
<tbody>
|
|
{this.props.children}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
}
|
|
|
|
export function Item({link, name, icon, author, description, tags, fictionalDate, createdDate}) {
|
|
return [
|
|
<tr className="ListItem color-primary">
|
|
<td className="icon color-highlight-primary">{icon}</td>
|
|
<td className="content color-primary color-highlight-dark">
|
|
<div className="title">
|
|
<Link className="color-primary" to={link}>{name}</Link>
|
|
</div>
|
|
<div className="description color-text">{description}</div>
|
|
<div className="meta">
|
|
<ItemMeta key="D2" kind="date" value={createdDate} />
|
|
<ItemMeta key="D1" kind="date" value={fictionalDate} />
|
|
<ItemMeta key="T" kind="tag" value={tags[0] || null} />
|
|
<ItemMeta key="A" kind="author" value={author} />
|
|
</div>
|
|
</td>
|
|
</tr>,
|
|
<tr className="ListItem-spacer">
|
|
<td></td>
|
|
</tr>
|
|
]
|
|
}
|
|
|
|
function ItemMeta({kind, value, className}) {
|
|
// Hide empty fields
|
|
if (value == null || value == "") {
|
|
return null
|
|
}
|
|
|
|
switch (kind) {
|
|
case "date": {
|
|
const m = moment(value)
|
|
if (m.year() < 2) {
|
|
return null
|
|
}
|
|
|
|
return <div className="date color-menu">{m.format("MMM D, YYYY")}</div>
|
|
}
|
|
|
|
case "tag": {
|
|
return <div className={`tag color-tag-${value.kind.toLowerCase()}`}>{value.name}</div>
|
|
}
|
|
|
|
case "author": {
|
|
return <div className="author color-menu">{value}</div>
|
|
}
|
|
}
|
|
}
|