refactor: migrate landing page to ts

src/pages/LandingPageV3/CelebrateOurWins/index.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+
+import NextArrow from '../../../assets/icons/arrows/nextArrowRight.svg?react';
+import PrevArrow from '../../../assets/icons/arrows/prevArrowLeft.svg?react';
+import celebrate from '../../../assets/images/aboutpage/spirited.jpg';
+import LargeStars from '../../../assets/images/landingpage-v3/LargeShowcaseStars.svg?react';
+import LeftArrow from '../../../assets/images/landingpage-v3/LeftTriangleArrow.svg?react';
+import RightArrow from '../../../assets/images/landingpage-v3/RightTriangleArrow.svg?react';
+import SmallStars from '../../../assets/images/landingpage-v3/SmallShowcaseStars.svg?react';
+import { urlFor } from '../../../client';
+import { useSanity } from '../../../services/useSanity';
+import type { Copy, SanityShowcase, Showcase } from '../types';
+
+export default function CelebrateOurWins() {
+  const copyQuery = `*[_type == "copy" && key == "celebrate-our-wins"]{header, content}`;
+  const copy = useSanity<Copy>(copyQuery);
+  const showcaseQuery = `*[_type == "showcase"] {year, image, semester} | order(year asc)`;
+
+  const showcases = useSanity<SanityShowcase, Showcase>(showcaseQuery, {}, data =>
+    data
+      ? data
+          .map(showcase => ({
+            ...showcase,
+            semester: showcase.semester.toUpperCase(),
+            image: urlFor(showcase.image).url(),
+          }))
+          .sort((a, b) => {
+            if (a.year === b.year) {
+              return a.semester === 'SPRING' ? -1 : 1;
+            }
+
+            return Number(a.year) - Number(b.year);
+          })
+      : []
+  );
+
+  const [selectedShowcase, setSelectedShowcase] = useState<Partial<Showcase>>(
+    showcases && showcases.length !== 0 ? showcases[showcases.length - 1] : {}
+  );
+
+  useEffect(() => {
+    setSelectedShowcase(showcases && showcases.length !== 0 ? showcases[showcases.length - 1] : {});
+  }, [showcases]);
+
+  const handleLeftButtonClick = () => {
+    const currentIndex = showcases.findIndex(
+      showcase => showcase.year === selectedShowcase.year && showcase.semester === selectedShowcase.semester
+    );
+
+    if (currentIndex > 0) {
+      setSelectedShowcase(showcases[currentIndex - 1]);
+    } else {
+      setSelectedShowcase(showcases.at(-1) ?? {});
+    }
+  };
+
+  const handleRightButtonClick = () => {
+    const currentIndex = showcases.findIndex(
+      showcase => showcase.year === selectedShowcase.year && showcase.semester === selectedShowcase.semester
+    );
+
+    if (currentIndex < showcases.length - 1) {
+      setSelectedShowcase(showcases[currentIndex + 1]);
+    } else {
+      setSelectedShowcase(showcases.at(0) ?? {});
+    }
+  };
+
+  return (
+    <div className="bg-row" id="ll7-row">
+      <div id="showcase-content">
+        <LargeStars id="showcase-large-stars" />
+        <SmallStars id="showcase-small-stars-top" />
+        <div className="white-header-text" id="showcase-header">
+          {copy && copy[0] && copy[0].header}
+        </div>
+        <div id="showcase-top-content">
+          <img src={celebrate} className="showcase-img image-shadow" alt="Placeholder" />
+          <div id="showcase-right-col">
+            <div className="white-p-text">{copy && copy[0] && copy[0].content[0]}</div>
+            <SmallStars id="showcase-small-stars-bottom" />
+          </div>
+        </div>
+
+        <div id="showcase-carousel">
+          <button className="big-carousel-button" onClick={handleLeftButtonClick}>
+            <LeftArrow />
+          </button>
+          <div id="carousel-inner-content">
+            <div id="showcase-carousel-label" className="showcase-year">
+              {selectedShowcase.semester && selectedShowcase.year && (
+                <>
+                  <div id="showcase-semester-label">
+                    <div id="showcase-semester-highlight" className="showcase-semester-text">
+                      {selectedShowcase.semester.toUpperCase()}
+                    </div>
+                    <div className="showcase-semester-text">SHOWCASE</div>
+                  </div>
+
+                  <div id="showcase-year-br">
+                    {selectedShowcase.year[0]}
+                    {selectedShowcase.year[1]}
+                    <br />
+                    {selectedShowcase.year[2]}
+                    {selectedShowcase.year[3]}
+                  </div>
+                  <div id="showcase-year-nobr">{selectedShowcase.year}</div>
+                </>
+              )}
+            </div>
+            <img
+              className="image-shadow showcase-carousel-img"
+              src={selectedShowcase.image}
+              alt={selectedShowcase.year}
+            />
+            <div id="small-carousel-nav">
+              <button className="sm-carousel-button" onClick={handleLeftButtonClick}>
+                <PrevArrow />
+              </button>
+              <button className="sm-carousel-button" onClick={handleRightButtonClick}>
+                <NextArrow />
+              </button>
+            </div>
+          </div>
+          <button className="big-carousel-button" onClick={handleRightButtonClick}>
+            <RightArrow />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/LandingPageV3/ChooseYourCharacter/Mascot.jsx → src/pages/LandingPageV3/ChooseYourCharacter/Mascot.tsx

@@ -5,16 +5,15 @@
  * template). Everything else (hand, legs, shadow) keeps its original styling.
  * Any other svg props (width, height, className, etc.) are forwarded.
  */
-function Mascot({ color = '#FFFFFF', ...props }) {
+import type { SVGProps } from 'react';
+
+type MascotProps = SVGProps<SVGSVGElement> & {
+  color?: string;
+};
+
+function Mascot({ color = '#FFFFFF', ...props }: MascotProps) {
   return (
-    <svg
-      width="126"
-      height="126"
-      viewBox="0 0 126 126"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+    <svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       {/* Body */}
       <path
         d="M83.2781 79.7378V90.224H80.6178V92.8461H75.2982V95.4681H72.6379V98.0902H56.6793V95.4681H51.3597V92.8461H48.6994V90.224H46.0391V87.6019H40.7196V84.9799H35.4V82.3578H30.0805V77.1147H27.4202V74.4926H24.7599V69.2495H22.0996V64.0064L30.0795 32.5468H32.7397V29.9247H35.4V24.6816H38.0603V22.0596H40.7206V19.4375H43.3809V16.8154H46.0412V14.1934H61.9999V24.6796H64.6602V35.1658H67.3204V37.7878H54.0211V40.4099H46.0412V71.8695L48.7015 79.7347H59.3406C59.3406 79.7347 56.6803 79.7347 59.3406 82.3568C62.0009 84.9788 75.2993 82.3568 75.2993 82.3568V79.7347H83.2791L83.2781 79.7378Z"
@@ -184,7 +183,7 @@ function Mascot({ color = '#FFFFFF', ...props }) {
       />
       <path d="M74.887 80.0605H56.2681V85.3036H74.887V80.0605Z" fill={color} />
     </svg>
-  )
+  );
 }
 
-export default Mascot
+export default Mascot;