Skip to content

Commit 30de50a

Browse files
abraaovalentimabraaovalentim
authored
Merge pull request #76 from OCA-UFCG/feat/member-info
Card Member
2 parents cd80b2e + 208db6b commit 30de50a

File tree

6 files changed

+324
-3
lines changed

6 files changed

+324
-3
lines changed

‎public/sprite.svg

Lines changed: 49 additions & 0 deletions
Loading

‎src/components/TeamMember/ExpandedInfo/ExpandedInfo.styles.tsx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import styled from "styled-components";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import { Icon as DefaultIcon } from "@/components/Icon/Icon";
5+
6+
export const ExpandedInfoWrapper = styled.div`
7+
display: flex;
8+
border-radius: 6px;
9+
flex-direction: column;
10+
background-color: ${({ theme }) => theme.colors.white};
11+
background-image: url("/flower-background.png");
12+
background-size: cover;
13+
z-index: 1;
14+
max-width: 35rem;
15+
margin: 1rem;
16+
padding: 1rem;
17+
position: relative;
18+
gap: 1rem;
19+
20+
@media screen and (min-width: 500px) {
21+
min-width: 30rem;
22+
}
23+
`;
24+
25+
export const HeaderWrapper = styled.div`
26+
display: flex;
27+
@media screen and (max-width: 500px) {
28+
flex-direction: column;
29+
align-items: center;
30+
}
31+
`;
32+
33+
export const Avatar = styled(Image)`
34+
border-radius: 3px;
35+
width: 14rem;
36+
height: 14rem;
37+
box-shadow: 0 0 2px ${({ theme }) => theme.colors.black};
38+
box-sizing: border-box;
39+
40+
@media screen and (max-width: 500px) {
41+
width: 100%;
42+
height: auto;
43+
}
44+
`;
45+
46+
export const NamedIdentify = styled.div`
47+
display: flex;
48+
flex-direction: column;
49+
gap: 0.3rem;
50+
justify-content: center;
51+
width: 100%;
52+
53+
@media screen and (min-width: 500px) {
54+
align-items: center;
55+
}
56+
`;
57+
58+
export const Identify = styled.div`
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
gap: 0.3rem;
63+
padding: 1rem;
64+
justify-content: center;
65+
width: 100%;
66+
67+
@media screen and (max-width: 500px) {
68+
flex-direction: row;
69+
align-items: center;
70+
}
71+
`;
72+
73+
export const Name = styled.span`
74+
font-weight: bold;
75+
font-size: 1.3rem;
76+
`;
77+
78+
export const Role = styled.span`
79+
font-size: 0.9rem;
80+
color: ${({ theme }) => theme.colors.gray};
81+
`;
82+
83+
export const Networks = styled.div`
84+
display: flex;
85+
gap: 0.8rem;
86+
align-items: center;
87+
`;
88+
89+
export const Medias = styled(Link)`
90+
transition: 0.2s;
91+
color: ${({ theme }) => theme.colors.black}90;
92+
&:hover {
93+
opacity: 0.6;
94+
}
95+
96+
img {
97+
max-width: 1.75rem;
98+
max-height: 1.75rem;
99+
}
100+
`;
101+
102+
export const BottomWrapper = styled.div`
103+
display: flex;
104+
flex-direction: column;
105+
`;
106+
107+
export const Icon = styled(DefaultIcon)`
108+
color: ${({ theme }) => theme.colors.black};
109+
opacity: 0.7;
110+
`;
111+
112+
export const CloseIcon = styled(DefaultIcon)`
113+
color: ${({ theme }) => theme.colors.black};
114+
opacity: 0.7;
115+
position: absolute;
116+
top: 1rem;
117+
right: 1rem;
118+
z-index: 10;
119+
cursor: pointer;
120+
`;
121+
122+
export const SubTitleText = styled.span`
123+
font-size: 1.2rem;
124+
color: ${({ theme }) => theme.colors.black};
125+
font-weight: bold;
126+
`;
127+
128+
export const SubTitle = styled.div`
129+
display: flex;
130+
align-items: center;
131+
gap: 0.5rem;
132+
`;
133+
134+
export const Description = styled.p`
135+
font-size: 1rem;
136+
color: ${({ theme }) => theme.colors.black};
137+
`;

‎src/components/TeamMember/ExpandedInfo/ExpandedInfo.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { ITeamMember, ISocialMedia } from "@/utils/interfaces";
2+
import {
3+
ExpandedInfoWrapper,
4+
Avatar,
5+
Name,
6+
Role,
7+
Identify,
8+
NamedIdentify,
9+
HeaderWrapper,
10+
SubTitle,
11+
SubTitleText,
12+
Icon,
13+
CloseIcon,
14+
BottomWrapper,
15+
Description,
16+
Networks,
17+
Medias,
18+
} from "./ExpandedInfo.styles";
19+
20+
const ExpandedInfo = ({
21+
data,
22+
onClose,
23+
}: {
24+
data: ITeamMember;
25+
onClose: () => void;
26+
}) => {
27+
const {
28+
name,
29+
role,
30+
avatar,
31+
github,
32+
linkedin,
33+
lattes,
34+
fieldWork,
35+
institution,
36+
} = data;
37+
38+
const socialMedias: ISocialMedia[] = [
39+
{ name: "github", href: github, icon: "github", size: 24 },
40+
{ name: "linkedin", href: linkedin, icon: "linkedin", size: 24 },
41+
{ name: "lattes", href: lattes, icon: "lattes", size: 24 },
42+
];
43+
44+
return (
45+
<ExpandedInfoWrapper>
46+
<HeaderWrapper>
47+
<CloseIcon id="close" size={24} onClick={onClose} />
48+
<Avatar
49+
src={
50+
`https:${typeof avatar === "object" ? avatar.fields.file.url : avatar}` ||
51+
"avatar.svg"
52+
}
53+
alt="Profile picture"
54+
width={1600}
55+
height={900}
56+
/>
57+
<Identify>
58+
<NamedIdentify>
59+
<Name>{name}</Name>
60+
<Role>{role}</Role>
61+
</NamedIdentify>
62+
<Networks>
63+
{socialMedias.map(
64+
({ name, href, icon, size }: ISocialMedia, index: number) =>
65+
href && (
66+
<Medias target="_blank" key={index} title={name} href={href}>
67+
<Icon id={icon} size={size} />
68+
</Medias>
69+
),
70+
)}
71+
</Networks>
72+
</Identify>
73+
</HeaderWrapper>
74+
{(fieldWork || institution) && (
75+
<BottomWrapper>
76+
{fieldWork && (
77+
<>
78+
<SubTitle>
79+
<Icon id="bookIcon" size={24} />
80+
<SubTitleText>Area de Atuação</SubTitleText>
81+
</SubTitle>
82+
<Description>
83+
{fieldWork?.map((field, index: number) =>
84+
index === 0 ? field : `, ${field}`,
85+
)}
86+
</Description>
87+
</>
88+
)}
89+
{institution && (
90+
<>
91+
<SubTitle>
92+
<Icon id="institutionIcon" size={24} />
93+
<SubTitleText>Instituição</SubTitleText>
94+
</SubTitle>
95+
<Description>{institution}</Description>
96+
</>
97+
)}
98+
</BottomWrapper>
99+
)}
100+
</ExpandedInfoWrapper>
101+
);
102+
};
103+
104+
export default ExpandedInfo;

‎src/components/TeamMember/TeamMember.styles.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,16 @@ export const Medias = styled(Link)`
8989
max-height: 1.75rem;
9090
}
9191
`;
92+
93+
export const InfoBackground = styled.div`
94+
background-color: rgba(0, 0, 0, 0.4);
95+
width: 100vw;
96+
height: 100vh;
97+
position: fixed;
98+
top: 0;
99+
left: 0;
100+
z-index: 1000;
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
`;

‎src/components/TeamMember/TeamMember.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,46 @@ import {
88
InfoContainer,
99
Medias,
1010
ExpandIcon,
11+
InfoBackground,
1112
} from "./TeamMember.styles";
13+
import { useState } from "react";
1214
import { Icon } from "../Icon/Icon";
15+
import ExpandedInfo from "./ExpandedInfo/ExpandedInfo";
1316

1417
const TeamMember = ({ data }: { data: ITeamMember }) => {
1518
const { name, avatar, role, github, linkedin, lattes } = data;
1619

20+
const [expanded, setExpanded] = useState(false);
21+
1722
const socialMedias: ISocialMedia[] = [
1823
{ name: "github", href: github, icon: "github", size: 24 },
1924
{ name: "linkedin", href: linkedin, icon: "linkedin", size: 24 },
2025
{ name: "lattes", href: lattes, icon: "lattes", size: 24 },
2126
];
2227

28+
const setExpandedHandler = () => setExpanded(!expanded);
29+
30+
const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();
31+
2332
return (
2433
<Wrapper>
25-
<InfoContainer>
34+
{expanded && (
35+
<InfoBackground onClick={setExpandedHandler}>
36+
<div onClick={stopPropagation}>
37+
<ExpandedInfo data={data} onClose={setExpandedHandler} />
38+
</div>
39+
</InfoBackground>
40+
)}
41+
<InfoContainer onClick={setExpandedHandler}>
2642
<ExpandIcon id="expand" size={24} />
2743
<Avatar
2844
src={
2945
`https:${typeof avatar === "object" ? avatar.fields.file.url : avatar}` ||
3046
"avatar.svg"
3147
}
3248
alt="Profile picture"
33-
width={50}
34-
height={50}
49+
width={160}
50+
height={90}
3551
/>
3652
<Name>{name}</Name>
3753
<Role>{role}</Role>

‎src/utils/interfaces.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export interface ITeamMember {
1111
github?: string;
1212
linkedin?: string;
1313
lattes?: string;
14+
fieldWork?: string[];
15+
institution?: string;
1416
}
1517

1618
export interface ISocialMedia {

0 commit comments

Comments
 (0)