@@ -3,6 +3,7 @@ import Popup from "reactjs-popup";
33import SocialMediaContacts from "./SocialMediaContacts" ;
44import { useRef , useState } from "react" ;
55import LargePortraitCard from "./LargePortraitCard" ;
6+ import Avatar from "./Avatar" ;
67
78const contentStyle = {
89 background : "white" ,
@@ -36,7 +37,7 @@ function calculateOffsets(elementRef) {
3637 return offsets ;
3738}
3839
39- export function SmallPortraitCard ( { person, avatarUrl , setOffsets } ) {
40+ export function SmallPortraitCard ( { person, setOffsets } ) {
4041 const elementRef = useRef ( null ) ;
4142
4243 return (
@@ -48,36 +49,18 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) {
4849 setOffsets ( calculateOffsets ( elementRef ) ) ;
4950 } }
5051 >
51- < div className = "flex-full-centered" >
52- < div className = { styles . avatar } >
53- < img
54- src = { avatarUrl }
55- width = { "160px" }
56- height = { "160px" }
57- alt = {
58- "Avatar of " +
59- person . completeName +
60- "working at QuantStack as a " +
61- person . position
62- }
63- />
64- </ div >
65- </ div >
66- < div className = { styles . small_card_complete_name } >
52+ < Avatar person = { person } />
53+ < div className = { "flex-full-centered" + " " + styles . small_card_complete_name } >
6754 { person . completeName }
6855 </ div >
69- < div className = { styles . small_card_position } > { person . position } </ div >
56+ < div className = { "flex-full-centered" + " " + styles . small_card_position } > { person . position } </ div >
7057 < div style = { { marginTop : "var(--ifm-spacing-xl)" } } >
7158 < SocialMediaContacts person = { person } > </ SocialMediaContacts >
7259 </ div >
7360 </ div >
7461 ) ;
7562}
76- export default function PopupPortrait ( {
77- person,
78- avatarUrl,
79- subTeamBioComponent,
80- } ) {
63+ export default function PopupPortrait ( { person } ) {
8164 const [ offsets , setOffsets ] = useState ( [ 0 , 0 ] ) ;
8265 let [ isPopupOpen , setIsPopupOpen ] = useState ( false ) ;
8366
@@ -87,19 +70,14 @@ export default function PopupPortrait({
8770 open = { isPopupOpen }
8871 closeOnEscape = { true }
8972 closeOnDocumentClick = { true }
90- onClose = { ( ) => setIsPopupOpen ( false ) }
91-
73+ onClose = { ( ) => setIsPopupOpen ( false ) }
9274 trigger = {
9375 < div >
94- < SmallPortraitCard
95- person = { person }
96- avatarUrl = { avatarUrl }
97- setOffsets = { setOffsets }
98- />
76+ < SmallPortraitCard person = { person } setOffsets = { setOffsets } />
9977 </ div >
10078 }
10179 onOpen = { ( ) => {
102- setIsPopupOpen ( true )
80+ setIsPopupOpen ( true ) ;
10381 } }
10482 contentStyle = { contentStyle }
10583 overlayStyle = { overlayStyle }
@@ -108,15 +86,14 @@ export default function PopupPortrait({
10886 offsetY = { offsets [ 1 ] }
10987 >
11088 < div >
111- < button className = "close-button" style = { { position : "absolute" , right :"0px" } }
112- onClick = { ( ) => { setIsPopupOpen ( false )
113-
114- } } > </ button >
115- < LargePortraitCard
116- person = { person }
117- avatarUrl = { avatarUrl }
118- BioComponent = { subTeamBioComponent }
119- > </ LargePortraitCard >
89+ < button
90+ className = "close-button"
91+ style = { { position : "absolute" , right : "0px" } }
92+ onClick = { ( ) => {
93+ setIsPopupOpen ( false ) ;
94+ } }
95+ > </ button >
96+ < LargePortraitCard person = { person } > </ LargePortraitCard >
12097 </ div >
12198 </ Popup >
12299 </ div >
0 commit comments