feat: include hardcoded speaker

Victor Rentea

Author: anyulled

src/views/Home/components/SpeakersCarousel/SpeakerSwiper.tsx

@@ -10,98 +10,121 @@ import conferenceData from "../../../../data/2025.json";
 import {ROUTE_SPEAKER_DETAIL} from "../../../../constants/routes";
 import {useFetchSpeakers} from "../../../Speakers/UseFetchSpeakers";
 import * as Sentry from "@sentry/react";
+import {ISpeaker} from "../../../../types/speakers";
 
 const StyledSlideImage = styled.img`
-  display: block;
-  width: 100%;
-  aspect-ratio: 1/1;
-  border-radius: 10px;
+    display: block;
+    width: 100%;
+    aspect-ratio: 1/1;
+    border-radius: 10px;
 `;
 
 const StyledSlideContain = styled.div`
-  position: absolute;
-  bottom: 0;
-  background: ${Color.MAGENTA};
-  background: linear-gradient(
-    to bottom,
-    rgba(255, 0, 0, 0),
-    ${Color.DARK_BLUE}
-  );
-  padding: 0.5rem 0.25rem;
-  min-width: 100%;
+    position: absolute;
+    bottom: 0;
+    background: ${Color.MAGENTA};
+    background: linear-gradient(
+            to bottom,
+            rgba(255, 0, 0, 0),
+            ${Color.DARK_BLUE}
+    );
+    padding: 0.5rem 0.25rem;
+    min-width: 100%;
 `;
 
 const StyledSlideText = styled.p`
-  font-size: 0.875rem;
-  color: white;
+    font-size: 0.875rem;
+    color: white;
 `;
 const SpeakerSwiper: FC<React.PropsWithChildren<unknown>> = () => {
-  const { isLoading, data, error } = useFetchSpeakers();
+    const {isLoading, data, error} = useFetchSpeakers();
 
-  const cachedSpeakers = React.useMemo(()=>data?.sort(() => 0.5 - Math.random()).slice(0, 20), [data]);
+    const victorRentea: ISpeaker = {
+        id: "1f247b87-4af0-4f70-be44-f139bf3f726a",
+        fullName: "Victor Rentea",
+        bio: "Java Champion from Bucharest",
+        speakerImage: "https://sessionize.com/image/3031-0o0o0-a3r6JkTgm9aUHJXBhbvnWQ.jpg?download=victor-rentea.jpg",
+        linkedInUrl: {
+            url: "https://x.com/victorrentea",
+            linkType: "LinkedIn",
+            title: "LinkedIn"
+        },
+        sessions: [],
+        twitterUrl: {
+            url: "https://www.linkedin.com/in/victor-rentea-trainer",
+            linkType: "Twitter",
+            title: "Twitter"
+        },
+        tagLine: "Java Champion from Bucharest",
+    };
 
-  if (error) {
-    Sentry.captureException(error);
-  }
+    const cachedSpeakers = React.useMemo(() => {
+        const allSpeakers = data ? [...data, victorRentea] : [victorRentea];
+        return allSpeakers.sort(() => 0.5 - Math.random()).slice(0, 20);
+    }, [data]);
 
-  return (
-    <>
-      {isLoading && <p>Loading</p>}
-      {conferenceData.carrousel.enabled && cachedSpeakers && (
-        <Swiper
-          /*autoplay={{
-            delay: 5000,
-            disableOnInteraction: true,
-          }}*/
-          slidesPerView={1}
-          spaceBetween={10}
-          speed={5000}
-          parallax={true}
-          //loop={true}
-          grabCursor={true}
-          breakpoints={{
-            340: {
-              width: 640,
-              slidesPerView: 3,
-              spaceBetween: 10,
-            },
-            768: {
-              width: 768,
-              slidesPerView: 3,
-              spaceBetween: 10,
-            },
-            1024: {
-              width: 1024,
-              slidesPerView: 5,
-              centeredSlides: true,
-              spaceBetween: 30,
-              autoHeight: true,
-            },
-          }}
-          centeredSlides={true}
-          modules={[/*Autoplay,*/ Parallax]}
-          className="mySwiper"
-        >
-          {cachedSpeakers.map((speaker) => (
-            <SwiperSlide key={speaker.id}>
-              <Link
-                to={`${ROUTE_SPEAKER_DETAIL}/${speaker.id}`}
-                style={{ textDecoration: "none" }}
-              >
-                <StyledSlideImage
-                  src={speaker.speakerImage}
-                  alt={speaker.fullName}
-                />
-                <StyledSlideContain>
-                  <StyledSlideText>{speaker.fullName}</StyledSlideText>
-                </StyledSlideContain>
-              </Link>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      )}
-    </>
-  );
+    if (error) {
+        Sentry.captureException(error);
+    }
+
+    return (
+        <>
+            {isLoading && <p>Loading</p>}
+            {conferenceData.carrousel.enabled && cachedSpeakers && (
+                <Swiper
+                    /*autoplay={{
+                      delay: 5000,
+                      disableOnInteraction: true,
+                    }}*/
+                    slidesPerView={1}
+                    spaceBetween={10}
+                    speed={5000}
+                    parallax={true}
+                    //loop={true}
+                    grabCursor={true}
+                    breakpoints={{
+                        340: {
+                            width: 640,
+                            slidesPerView: 3,
+                            spaceBetween: 10,
+                        },
+                        768: {
+                            width: 768,
+                            slidesPerView: 3,
+                            spaceBetween: 10,
+                        },
+                        1024: {
+                            width: 1024,
+                            slidesPerView: 5,
+                            centeredSlides: true,
+                            spaceBetween: 30,
+                            autoHeight: true,
+                        },
+                    }}
+                    centeredSlides={true}
+                    modules={[/*Autoplay,*/ Parallax]}
+                    className="mySwiper"
+                >
+                    {cachedSpeakers.map((speaker) => (
+                        <SwiperSlide key={speaker.id}>
+                            <Link
+                                to={`${ROUTE_SPEAKER_DETAIL}/${speaker.id}`}
+                                style={{textDecoration: "none"}}
+                            >
+                                <StyledSlideImage
+                                    src={speaker.speakerImage}
+                                    alt={speaker.fullName}
+                                />
+                                <StyledSlideContain>
+                                    <StyledSlideText>{speaker.fullName}</StyledSlideText>
+                                </StyledSlideContain>
+                            </Link>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+            )}
+        </>
+    );
 };
 
 export default SpeakerSwiper;