client/src/components/selection/ServerCard.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardTitle, MDBCol } from 'mdbreact';

export default class ServerCard extends Component {
    render() {
        return(
            <React.Fragment>
                <MDBCol size={6}>
                    <MDBCard className="server-card">
                        <MDBCardBody>
                            <img
                                width="200px"
                                alt={`Icon of ${this.props.guild.name}`}
                                className="server-card-image"
                                src={this.props.guild.icon ?
                                    `https://cdn.discordapp.com/icons/${this.props.guild.id}/${this.props.guild.icon}.png?size=4096` :
                                    `https://cdn.discordapp.com/embed/avatars/3.png`
                                }
                            />
                            
                            <MDBCardTitle><h6><strong>{this.props.guild.name}</strong></h6></MDBCardTitle>
                            <Link to={`/server/${this.props.guild.id}`}>
                                <MDBBtn color="primary">Manage</MDBBtn>
                            </Link>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
            </React.Fragment>
        )
    }
}

ServerCard.propTypes = {
    guild: PropTypes.object
}