43 lines
1.8 KiB
JavaScript
43 lines
1.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import * as BS from 'react-bootstrap'
|
|
|
|
import defaultAvatar from '../default_discord_avatar.png'
|
|
import { FaUser } from "react-icons/fa";
|
|
|
|
export default function MemberCard(props) {
|
|
|
|
const { toHTML } = require('discord-markdown');
|
|
|
|
const [ desc, setDesc ] = useState("");
|
|
const member = props.member;
|
|
|
|
useEffect(() => {
|
|
if (member.description) {
|
|
setDesc(toHTML(member.description));
|
|
} else setDesc("(no description)");
|
|
}, [member.description]);
|
|
|
|
return (
|
|
<>
|
|
<BS.Accordion.Toggle className="d-flex align-items-center justify-content-between" as={BS.Card.Header} eventKey={member.id}>
|
|
<BS.Card.Title className="float-left"><FaUser className="mr-4" /> <b>{member.name}</b> ({member.id})</BS.Card.Title>
|
|
{ member.avatar_url ? <BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> :
|
|
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
|
|
</BS.Accordion.Toggle>
|
|
<BS.Accordion.Collapse eventKey={member.id}>
|
|
<BS.Card.Body>
|
|
<BS.Row>
|
|
<BS.Col xs={12} md={3}><b>ID:</b> {member.id}</BS.Col>
|
|
{ member.display_name ? <BS.Col xs={12} md={3}><b>AKA: </b>{member.display_name}</BS.Col> : "" }
|
|
{ member.birthday ? <BS.Col xs={12} md={3}><b>Birthday:</b> {member.birthday}</BS.Col> : "" }
|
|
{ member.pronouns ? <BS.Col xs={12} md={3}><b>Pronouns:</b> {member.pronouns}</BS.Col> : "" }
|
|
</BS.Row>
|
|
<br/>
|
|
<p><b>Description:</b></p>
|
|
<p dangerouslySetInnerHTML={{__html: desc}}></p>
|
|
</BS.Card.Body>
|
|
</BS.Accordion.Collapse>
|
|
</>
|
|
)
|
|
}
|