Merge pull request #47 from gdg-uberlandia/speaker-tests

Speaker tests

package.json

@@ -31,7 +31,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.14.1",
-    "reactstrap": "^9.1.3"
+    "reactstrap": "^9.1.3",
+    "swiper": "^11.0.6"
   },
   "devDependencies": {
     "@types/node": "18.7.3",

src/back-features/speakers.ts

@@ -53,7 +53,7 @@ const createSpeaker = async ({ key, id, companyTitle, mini_bio, name, photo, tec
 
 }
 
-const getSpeaker = async () => {
+const getSpeakers = async () => {
     try {
 
         const speakersQuerySnapshot = await db.collection(SPEAKERS_COLLECTION).get();
@@ -86,6 +86,6 @@ const deleteSpeaker = async (speakerId: string) => {
 
 export {
     createSpeaker,
-    getSpeaker,
+    getSpeakers,
     deleteSpeaker
 }

src/components/carousel/index.tsx

@@ -0,0 +1,6 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+
+export const Carousel = {
+  Container: Swiper,
+  Item: SwiperSlide,
+}

src/components/iwd-2024/speakers-section/SpeakerCard.module.css

@@ -0,0 +1,91 @@
+.SpeakerCard {
+  border-radius: 29px;
+  border: 1px solid #191A23;
+  box-shadow: 0 5px 0 0 #191A23;
+  font-family: "Space Grotesk", sans-serif;
+  padding: 2em;
+  margin: 0 auto 5px auto;
+  position: relative;
+}
+
+.SpeakerCard.Active {
+  font-size: 0.8rem;
+  width: 24rem;
+}
+
+.SpeakerCard.Inactive {
+  font-size: 0.8rem;
+  width: 20rem;
+}
+
+.SpeakerCardTitle {
+  border-radius: 5px;
+  font-size: 1.25em;
+  font-weight: medium;
+  width: fit-content;
+  padding: 0 0.25rem;
+  display: block;
+
+  &.primary {
+    background-color: var(--white);
+  }
+
+  &.secondary {
+    background-color: var(--soft-green);
+  }
+
+  &.tertiary {
+    background-color: var(--gray);
+  }
+}
+
+.SpeakerCardFilled {
+  &.Active {
+    background-color: var(--soft-blue3);
+  }
+
+  &.Inactive {
+    background-color: var(--gray);
+  }
+}
+
+.SpeakerCardImage {
+  display: flex;
+  margin-left: auto;
+  margin-top: -3em;
+}
+
+.SpeakerCardFooter {
+  align-items: center;
+  color: #191A23;
+  display: flex;
+  font-size: 0.85em;
+  gap: 0.75em;
+  text-decoration: none;
+
+  .SpeakerCardFooterText {
+    margin-bottom: 0;
+  }
+}
+
+.SpeakerCardFooter:hover {
+  cursor: pointer;
+}
+
+.ArrowIcon {
+  align-items: center;
+  background-color: #191A23;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  height: 1.625rem;
+  width: 1.625rem;
+}
+
+
+@media (min-width: 1200px) {
+  .SpeakerCard.Active {
+    font-size: 16px;
+    height: 17.8rem;
+  }
+}

src/components/iwd-2024/speakers-section/SpeakerModal.module.css

@@ -0,0 +1,165 @@
+.container {
+    padding: 0 0.75rem;
+}
+
+.card_container {
+    border-radius: 5%;
+    max-width: 350px;
+    padding-top: 38px;
+    margin-right: 1rem;
+    cursor: pointer;
+    height: 450px;
+}
+
+.card_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.card_image {
+    width: 150px;
+    height: 150px;
+}
+
+.card_name {
+    width: 100%;
+    font-size: 24px;
+    margin: 0;
+}
+
+.card_location {
+    width: 100%;
+    font-size: 14px;
+    margin: 0 0 0.8rem 0;
+}
+
+.card_topic {
+    width: 100%;
+    font-size: 16px;
+    color: #B0AEAE;
+    margin: 0;
+    margin-bottom: 10px;
+}
+
+.card_profile {
+    width: 100%;
+    font-size: 16px;
+    margin: 0;
+    text-decoration: none;
+}
+
+
+
+.button_container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2rem;
+}
+
+.button_container a {
+    background: #298ae4;
+    color: #fff;
+    font-size: 1.2rem;
+    padding: 0.6rem 1rem;
+    border-radius: 0.7rem;
+    border: 3px solid #298ae4;
+}
+
+.button_container a:hover {
+    background: transparent;
+    color: #298ae4;
+    border: 3px solid #298ae4;
+}
+
+.modal_header {
+    padding: 32px 1.5rem 0 1.5rem;
+    border: none;
+}
+
+.modal_header button {
+    margin: 0 0 4rem 0 !important;
+}
+
+.modal_header .card_image {
+    margin: 0;
+}
+
+.modal_header>h5 {
+    flex: 1;
+}
+
+.modal_speaker_info_container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 2rem;
+}
+
+.modal_speaker_info_content h1 {
+    font-size: 24px;
+    margin: 0;
+}
+
+.modal_speaker_info_content p {
+    margin: 0;
+    font-size: 16px;
+}
+
+.modal_speaker_info_content p:first-of-type {
+    color: #B0AEAE;
+}
+
+.modal_body {
+    padding: 1rem 1.5rem 0 1.5rem;
+}
+
+.modal_body h2 {
+    font-size: 1.35rem;
+}
+
+.modal_body p:last-of-type {
+    margin: 0;
+}
+
+.modal_footer {
+    padding: 1rem 1.5rem 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+}
+
+.modal_footer a {
+    padding: 1rem;
+    cursor: pointer;
+}
+
+.modal_footer a svg {
+    color: #000 !important;
+}
+
+@media (max-width: 360px) {
+    .modal_footer a {
+        padding: 0.5rem;
+        cursor: pointer;
+    }
+}
+
+@media (max-width: 414px) {
+
+    .modal_footer a {
+        padding: 0.6rem;
+        cursor: pointer;
+    }
+}
+
+.speakers_link:link {
+    color: var(--blue)
+}