-
Notifications
You must be signed in to change notification settings - Fork 20
/
OfficerCard.js
66 lines (62 loc) · 1.92 KB
/
OfficerCard.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Image from 'next/image';
import React from 'react';
import styles from '../../styles/components/Officers/OfficerCard.module.scss';
import '@fortawesome/fontawesome-svg-core/styles.css';
function Officer({
name,
position,
img,
alt,
year,
// email,
size,
/* eslint-disable-next-line no-unused-vars */
committee, // no officer card formats use committee yet
}) {
if (size && size.toLowerCase() === 'compact') {
return (
<div className={`${styles['officer-card']} ${styles['officer-grid-row']}`}>
<div className={styles['officer-grid-col']}>
<div className={styles['image-container']}>
<Image
className="officer-image"
src={img}
alt={alt}
width={130}
height={130}
unoptimized={true}
/>
</div>
</div>
<div className={`${styles['officer-grid-col']} ${styles['officer-info']}`}>
<h3 className={styles['officer-title']}>{name}</h3>
<p className={styles['officer-text']}>{position}</p>
<p className={styles['officer-text']}>Class of {year}</p>
{/* <p className={styles['email-container']}> <a href={`mailto:${email}`} className={styles['officer-email']}> <FontAwesomeIcon icon={faEnvelope} className={styles['email-icon']} />Email icon
{email}
</a></p> */}
</div>
</div>
);
}
}
function Officers(props) {
return (
<>
{props.officers.map((officer) => (
<Officer
{...officer}
size={props.size}
style={props.style}
key={officer.name}
cname={officer.committee}
position={officer.role}
img={officer.photo}
/>
))}
</>
);
}
export default Officers;