Convert Carousel to JSX

components/Carousel.js → components/Carousel.tsx

@@ -1,18 +1,30 @@
+import { ItemListElements } from 'next-seo/lib/types';
 import Image from 'next/legacy/image';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, JSX } from 'react';
 
 // width of each img in px
 // needs to be updated if style.scss changes
 const IMAGE_WIDTH = 360;
 const ITEMS_PER_SECTION = 4;
 
-const Carousel = ({ images }) => {
-  const [sections, setSections] = useState([]);
+interface CarouselProps{
+  images: string[];
+}
+
+interface Section{
+  left: number;
+  width: number;
+  items: JSX.Element[];
+}
+
+const Carousel = ({images} : CarouselProps) => {
+  const [sections, setSections] = useState<Section[]>([]);
   const sectionWidth = (IMAGE_WIDTH * ITEMS_PER_SECTION) / 2;
 
   useEffect(() => {
     const numItems = images.length;
-    const sectionsData = [];
+
+    const sectionsData: Section[] = [];
 
     for (let i = 0; i < numItems; i += ITEMS_PER_SECTION) {
       sectionsData.push({
@@ -24,7 +36,7 @@ const Carousel = ({ images }) => {
             target="_blank"
             rel="noreferrer noopener"
             key={index}
-            tabIndex="-1"
+            tabIndex={-1}
           >
             <Image src={item} width={IMAGE_WIDTH} height={IMAGE_WIDTH} alt="" />
           </a>
@@ -54,9 +66,9 @@ const Carousel = ({ images }) => {
     <div id="carousel">
       <div id="carousel-inner">
         {sections.map((section, i) => {
-          const carouselStyle = {
-            left: section.left + 'px',
-            width: section.width + 'px',
+          const carouselStyle: React.CSSProperties = {
+            left: `${section.left}px`,
+            width: `${section.width}px`,
           };
           return (
             <div className="carousel-sect" style={carouselStyle} key={i}>

temp

@@ -0,0 +1,23 @@
+components/Carousel.tsx(9,21): error TS7031: Binding element 'images' implicitly has an 'any' type.
+components/Carousel.tsx(21,60): error TS7006: Parameter 'item' implicitly has an 'any' type.
+components/Carousel.tsx(21,66): error TS7006: Parameter 'index' implicitly has an 'any' type.
+components/Carousel.tsx(27,13): error TS2322: Type 'string' is not assignable to type 'number'.
+components/Carousel.tsx(35,17): error TS2345: Argument of type '{ left: number; width: number; items: any; }[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
+  Type '{ left: number; width: number; items: any; }[]' is not assignable to type 'never[]'.
+    Type '{ left: number; width: number; items: any; }' is not assignable to type 'never'.
+components/Carousel.tsx(40,19): error TS2339: Property 'left' does not exist on type 'never'.
+components/Carousel.tsx(41,23): error TS2339: Property 'left' does not exist on type 'never'.
+components/Carousel.tsx(42,21): error TS2339: Property 'left' does not exist on type 'never'.
+components/Carousel.tsx(58,27): error TS2339: Property 'left' does not exist on type 'never'.
+components/Carousel.tsx(59,28): error TS2339: Property 'width' does not exist on type 'never'.
+components/Carousel.tsx(63,24): error TS2339: Property 'items' does not exist on type 'never'.
+data/committees.tsx(16,9): error TS2503: Cannot find namespace 'JSX'.
+data/committees.tsx(21,22): error TS2503: Cannot find namespace 'JSX'.
+pages/about.tsx(8,18): error TS2307: Cannot find module '../offoutput.json' or its corresponding type declarations.
+pages/committees.tsx(5,30): error TS7016: Could not find a declaration file for module '../components/Committees/CommitteeSection'. '/Users/susiekim/webdev/website/components/Committees/CommitteeSection.js' implicitly has an 'any' type.
+pages/committees.tsx(6,24): error TS7016: Could not find a declaration file for module '../components/Committees/Sidebar'. '/Users/susiekim/webdev/website/components/Committees/Sidebar.js' implicitly has an 'any' type.
+pages/committees.tsx(8,18): error TS7016: Could not find a declaration file for module '../data'. '/Users/susiekim/webdev/website/data/index.js' implicitly has an 'any' type.
+pages/committees.tsx(60,28): error TS7006: Parameter 'committee' implicitly has an 'any' type.
+pages/officers.tsx(5,24): error TS7016: Could not find a declaration file for module '../components/Committees/Sidebar'. '/Users/susiekim/webdev/website/components/Committees/Sidebar.js' implicitly has an 'any' type.
+pages/officers.tsx(8,38): error TS7016: Could not find a declaration file for module '../components/Officers/CommitteeSectionOfficers'. '/Users/susiekim/webdev/website/components/Officers/CommitteeSectionOfficers.js' implicitly has an 'any' type.
+pages/officers.tsx(9,18): error TS7016: Could not find a declaration file for module '../data'. '/Users/susiekim/webdev/website/data/index.js' implicitly has an 'any' type.