Update to make carousel lazy load

Author: wkirby

src/components/Carousel.tsx

@@ -1,13 +1,12 @@
 import clsx from "clsx";
-import styles from "styles/components/Carousel.module.scss";
 import { EmblaCarouselType } from "embla-carousel";
+import styles from "styles/components/Carousel.module.scss";
 
 import { EmblaOptionsType } from "embla-carousel";
 import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { Button } from "./Button";
-import { MarkdownContent } from "./MarkdownContent";
-import { ChevronLeft, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 
 type PropType = {
   slides: ReactNode[];
@@ -22,7 +21,7 @@ type UsePrevNextButtonsType = {
 };
 
 export const usePrevNextButtons = (
-  emblaApi: EmblaCarouselType | undefined,
+  emblaApi: EmblaCarouselType | undefined
 ): UsePrevNextButtonsType => {
   const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = useState(true);

src/components/ProjectSlide.tsx

@@ -22,7 +22,7 @@ export const ProjectSlide: React.FC<ProjectSlideProps> = ({
 }) => {
   return (
     <div className={clsx(styles.project_slide, className)}>
-      <img src={image} alt={title} className={styles.project_slide__image} />
+      <img loading="lazy" src={image} alt={title} className={styles.project_slide__image} />
 
       <div className={clsx(styles.project_slide__content)}>
         <header className={styles.project_slide__header}>