113 lines
5.3 KiB
JavaScript
113 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
|
|
export default class ListItem extends React.Component {
|
|
state = {
|
|
}
|
|
|
|
componentDidMount() {
|
|
const randomColor = [
|
|
'#96cdcd',
|
|
'#cd6889',
|
|
'#eec5b7',
|
|
'#7ccd7c',
|
|
'#cdb7b5',
|
|
'#eeeed1',
|
|
'#8db6cd',
|
|
'#8b8b83',
|
|
];
|
|
|
|
this.setState({ randomColor: randomColor[Math.floor(Math.random() * randomColor.length)] });
|
|
}
|
|
|
|
buildIcons() {
|
|
const links = this.props.server.links || [];
|
|
|
|
return links.map((l, i) => {
|
|
if (l.type === 'youtube') {
|
|
return (<a href={l.url} title="Youtube" className="media-icon youtube" style={{ fontFamily: '"Font Awesome 5 Brands"', color: 'white' }} key={i}></a>);
|
|
} else if (l.type === 'twitter') {
|
|
return (<a href={l.url} title="Twitter" className="media-icon twitter" style={{ fontFamily: '"Font Awesome 5 Brands"', color: 'white' }} key={i}></a>);
|
|
} else if (l.type === 'twitch') {
|
|
return (<a href={l.url} title="Twitch" className="media-icon twitch" style={{ fontFamily: '"Font Awesome 5 Brands"', color: 'white' }} key={i}></a>);
|
|
} else if (l.type === 'reddit') {
|
|
return (<a href={l.url} title="Reddit" className="media-icon reddit" style={{ fontFamily: '"Font Awesome 5 Brands"', color: 'white' }} key={i}></a>);
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
render() {
|
|
let style = {};
|
|
if (this.props.server.featured && this.props.featured && this.props.server.backgroundImageVertical) {
|
|
style = { backgroundImage: `url(${this.props.server.backgroundImageVertical})` };
|
|
} else if ((this.props.server.premium || this.props.server.featured) && this.props.server.backgroundImage) {
|
|
style = { backgroundImage: `url(${this.props.server.backgroundImage})` };
|
|
}
|
|
// else {
|
|
// style = {
|
|
// backgroundImage: 'url(https://s.dyno.gg/server-listing/squares.png)',
|
|
// backgroundSize: 'auto',
|
|
// backgroundRepeat: 'repeat',
|
|
// backgroundColor: '#2f2f2f',
|
|
// };
|
|
// }
|
|
style.backgroundColor = style.backgroundColor || '#3B3D43';
|
|
|
|
if (this.props.server.borderColor) {
|
|
style.borderColor = this.props.server.borderColor;
|
|
}
|
|
|
|
let iconStyle = {
|
|
backgroundColor: '#666',
|
|
backgroundImage: `url(${this.props.server.icon || '/images/v3/dyno-44.svg'})`,
|
|
};
|
|
|
|
let inviteUrl = `/server/${this.props.server.id}/invite`;
|
|
const links = this.props.server.links || [];
|
|
const hasIcons = links && links.length > 0;
|
|
const extraDescriptionClasses = (!hasIcons) ? 'no-icons' : '';
|
|
|
|
return (
|
|
// linear-gradient(1deg, rgba(26,39,55,1) 15%, rgba(26,39,55,0.68) 95%, rgba(26,39,55,0.65) 100%);
|
|
<div className="server-list-item-wrapper" style={style}>
|
|
<div className="server-list-card">
|
|
<div className="server-list-card-header">
|
|
<div alt="server icon" className="server-list-item-icon"
|
|
style={iconStyle} ></div>
|
|
{hasIcons && (this.props.premium || this.props.featured) &&
|
|
<div className="server-media-icons">
|
|
{this.buildIcons()}
|
|
</div>
|
|
}
|
|
{ !this.props.premium && !this.props.featured &&
|
|
<div className="regular-join-wrapper">
|
|
<a className="server-join-regular button is-info is-rounded" href={inviteUrl} target="_blank"><strong>Join</strong></a>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className="server-name is-size-4" title={this.props.server.name}>{this.props.server.name}</div>
|
|
<div className="server-member-count is-size-6"><span>{this.props.server.memberCount}</span> members</div>
|
|
<div className={`server-description ${extraDescriptionClasses}`}>
|
|
{ !this.props.premium &&
|
|
<div className="server-description-content-wrapper">
|
|
<p>{this.props.server.description}</p>
|
|
</div>
|
|
}
|
|
{ this.props.featured && this.props.server.categories && this.props.server.categories.length > 0 &&
|
|
<div className="tag-wrapper">
|
|
{
|
|
this.props.server.categories.slice(0, 2).map((cat, i) => {
|
|
return (<span className="category-tag" key={i}>#{cat.toLowerCase()}</span>);
|
|
})
|
|
}
|
|
</div>
|
|
}
|
|
{ (this.props.premium || this.props.featured) &&
|
|
<a className="server-join button is-info is-rounded" href={inviteUrl} target="_blank"><strong>Join</strong></a>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|