-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Intialize Speaker page * Add speaker page * Modified js and tsx file to jsx * Fix speaker page bio header alignment * Improve accessibility * Speakers page enhancements * Add speaker modal and speakers data added in schedule * Modify schedule based on the data modification * Remove speakers data * Remove speakers import statement * Talk Deatils section added in speakers infor page
- Loading branch information
1 parent
d27b630
commit 50c580f
Showing
58 changed files
with
1,390 additions
and
470 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Modal } from "react-bootstrap"; | ||
|
|
||
| const CustomModal = ({ showModal, handleClose, children }) => { | ||
| return ( | ||
| <Modal show={showModal} size="lg"> | ||
| <Modal.Body> | ||
| <div className="row justify-content-end"> | ||
| <button | ||
| type="button" | ||
| className="btn-close" | ||
| aria-label="Close" | ||
| onClick={handleClose} | ||
| ></button> | ||
| </div> | ||
| {children} | ||
| </Modal.Body> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| function getRandomColor() { | ||
| // Function to generate a random color | ||
| const letters = '0123456789ABCDEF'; | ||
| let color = '#'; | ||
| for (let i = 0; i < 6; i++) { | ||
| color += letters[Math.floor(Math.random() * 16)]; | ||
| } | ||
| return color; | ||
| } | ||
|
|
||
|
|
||
| function getContrastColor(backgroundColor) { | ||
| // Function to get a contrasting text color based on the background color | ||
| const hex = backgroundColor.slice(1); | ||
| const r = parseInt(hex.slice(0, 2), 16); | ||
| const g = parseInt(hex.slice(2, 4), 16); | ||
| const b = parseInt(hex.slice(4, 6), 16); | ||
| const brightness = (r * 299 + g * 587 + b * 114) / 1000; | ||
| // Use black or white text based on brightness | ||
| return brightness > 128 ? '#000000' : '#ffffff'; | ||
| } | ||
|
|
||
| const NameAvatar = (props) => { | ||
| const initials = props.name.split(' ').map(word => word[0]).join('').toUpperCase(); | ||
| const backgroundColor = getRandomColor(); | ||
| const textColor = getContrastColor(backgroundColor); | ||
|
|
||
| return ( | ||
| <div | ||
| className={`name-initial-avatar ${props.className}`} | ||
| style={{ | ||
| fontSize: 50, | ||
| color: textColor, | ||
| backgroundColor: backgroundColor | ||
| }} | ||
| > | ||
| {initials} | ||
| </div>) | ||
| }; | ||
|
|
||
| export default NameAvatar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
|
|
||
| import IconComponent from "components/icons"; | ||
| import NameAvatar from "components/nameAvatar"; | ||
|
|
||
| const TalkDetail = (speaker) => { | ||
| return ( | ||
| <> | ||
| <span>Talk Details:</span> | ||
| <ul className="ms-3"> | ||
| {speaker.proposalLink ? | ||
| <li>Addressing: <Link target="_blank" href={speaker.proposalLink}>{speaker.proposalTitle}</Link></li> : | ||
| <li>Addressing: {speaker.proposalTitle}</li> | ||
| } | ||
| {speaker.talkDate && <li>Date: {speaker.talkDate}</li>} | ||
| {speaker.talkTime && <li>Time: {speaker.talkTime}</li>} | ||
| {speaker.track && <li>Track: {speaker.track}</li>} | ||
|
|
||
| </ul> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const SpeakerDetail = ({ speaker, showHyperLink }) => { | ||
| return ( | ||
| <div> | ||
| <div className="container bg-speaker-bio-box"> | ||
| <div className="row bg-speaker-bio-header w-100"> | ||
| <div className="d-flex col-12 py-4 justify-content-center"> | ||
| {speaker.profilePicture ? ( | ||
| <Image | ||
| src={speaker.profilePicture} | ||
| alt={`Image of ${speaker.fullName}`} | ||
| className="speaker-bio-image" | ||
| width={400} | ||
| height={400} | ||
| priority | ||
| /> | ||
| ) : ( | ||
| <NameAvatar | ||
| className="speaker-bio-image" | ||
| name={speaker.fullName} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="col-12 py-2 text-center"> | ||
| <h1>{speaker.fullName}</h1> | ||
| <p>{speaker.title}</p> | ||
| </div> | ||
| </div> | ||
| <div className="row bg-speaker-bio-about pt-4 px-4"> | ||
| <p dangerouslySetInnerHTML={{ __html: speaker.about }}></p> | ||
| {speaker.proposalTitle && | ||
| <TalkDetail {...speaker} />} | ||
| </div> | ||
| <div className="d-flex justify-content-between bg-speaker-bio-social py-2 px-4"> | ||
| <div> | ||
| {speaker.social.map((item, index) => ( | ||
| <span className="me-1" key={index}> | ||
| <Link | ||
| href={item.link} | ||
| target="_blank" | ||
| aria-label={`Hyperlink to speaker's ${item.icon} profile.`} | ||
| > | ||
| <IconComponent | ||
| className="my-1" | ||
| name={item.platform} | ||
| color="#fff" | ||
| backgroundColor="1f928d" | ||
| /> | ||
| </Link> | ||
| </span> | ||
| ))} | ||
| </div> | ||
| {showHyperLink && ( | ||
| <div> | ||
| <span className="me-1 d-flex flex-end"> | ||
| <Link | ||
| href="/speakers/[id]" | ||
| as={`/speakers/${encodeURIComponent( | ||
| speaker.id.toLowerCase() | ||
| )}`} | ||
| style={{ textDecoration: "none" }} | ||
| target="_blank" | ||
| > | ||
| <IconComponent | ||
| className="my-1" | ||
| name="newTab" | ||
| color="#fff" | ||
| backgroundColor="1f928d" | ||
| /> | ||
| </Link> | ||
| </span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SpeakerDetail; |
Oops, something went wrong.