traxxx/assets/views/home.jsx

120 lines
4.6 KiB
JavaScript

'use strict';
const React = require('react');
const moment = require('moment');
const PropTypes = require('prop-types');
const Layout = require('./layout.jsx');
const Home = ({ releases }) => (
<Layout>
<ul className="scenes">
{releases.map(release => (
<li key={release.id} className="scene">
<span
className="scene-banner"
>
<span className="scene-details">
<a
href={`/site/${release.site.id}`}
target="_blank"
rel="noopener noreferrer"
className="scene-site site-link"
title={release.network.name}
>
{release.site.name}
</a>
<a
href={release.url}
target="_blank"
rel="noopener noreferrer"
className="scene-date"
>
{moment(release.date).format('MMM D, YYYY')}
</a>
</span>
<a
href={`/scene/${release.id}`}
target="_blank"
rel="noopener noreferrer"
className="scene-row scene-link"
>
<img
src={`/${release.site.id}/${release.id}/0.jpg`}
alt={release.id}
className="scene-thumbnail"
/>
</a>
</span>
<div className="scene-info">
<a
href={`/scene/${release.id}`}
target="_blank"
rel="noopener noreferrer"
className="scene-row scene-link"
>
<h2 className="scene-title">{release.title}</h2>
</a>
<span className="scene-row">
<ul className="scene-actors nolist">
{release.actors.map(actor => (
<li
key={actor.id}
className="scene-actor"
>
<a
href={`/actor/${actor.id}`}
target="_blank"
rel="noopener noreferrer"
className="actor-link"
>
{actor.name}
</a>
</li>
))}
</ul>
</span>
<span
title={release.tags.map(tag => tag.tag).join(', ')}
className="scene-row"
>
<ul className="scene-tags nolist">
{release.tags.map(tag => (
<li
key={tag.tag}
className="scene-tag"
>
<a
href={`/tag/${tag.tag}`}
target="_blank"
rel="noopener noreferrer"
className="tag-link"
>
{tag.tag}
</a>
</li>
))}
</ul>
</span>
</div>
</li>
))}
</ul>
</Layout>
);
Home.propTypes = {
releases: PropTypes.arrayOf(PropTypes.object),
};
Home.defaultProps = {
releases: [],
};
module.exports = Home;