summaryrefslogtreecommitdiff
path: root/client/src/components/selection/ServerCard.js
blob: 2d0af93e66b74f4d798202a576ab6dfe86e12045 (plain) (blame)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Card, Button } from 'react-bootstrap';

export default class ServerCard extends Component {
    render() {
        return(
            <React.Fragment>
                <Card className="p-3 dark-card" style={{ width: '18rem' }}>
                    <Card.Img variant="top" 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` } />
                    <Card.Body>
                        <Card.Title>{this.props.guild.name}</Card.Title>
                        <Link to={`/server/${this.props.guild.id}`}>
                            <Button variant="primary">Manage</Button>
                        </Link>
                    </Card.Body>
                </Card>
                
                

                {/* <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
}