Filemanagement

src/components/OfficerCards.tsx → src/components/about/OfficerCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../styles/officerCard.css'
+import '../../styles/about/officerCard.css'
 import { useState, useEffect } from 'react';
 import {useRef} from 'react'
 import {useHover} from 'usehooks-ts'
@@ -14,7 +14,7 @@ interface Props {
 }
 
 
-function OfficerCards(props: Props) {
+function OfficerCard(props: Props) {
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [drawerClass, setDrawerClass] = useState('cardDrawerInvisible')
@@ -92,4 +92,4 @@ function OfficerCards(props: Props) {
   )
 }
 
-export default OfficerCards
+export default OfficerCard

src/components/Mailer.tsx → src/components/contact/Mailer.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import emailjs from '@emailjs/browser';
-import '../styles/mailer.css'
-import ECLAIRButton from './ECLAIRButton';
+import '../../styles/mailer.css'
+import ECLAIRButton from '../general/ECLAIRButton';
 import { useState, useRef } from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
 

src/components/ContactInformationContainer.tsx → src/components/general/ContactInformationContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import '../styles/sponsors.css';
+import '../../styles/sponsors/sponsors.css';
 
 interface ContactInformationContainerProps {
     href?: string

src/components/ECLAIRButton.tsx → src/components/general/ECLAIRButton.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
-import '../styles/eclairbutton.css'
+import '../../styles/eclairbutton.css'
+import '../../styles/app.css';
 
 
 interface Props {
@@ -20,11 +21,13 @@ function ECLAIRButton(props: Props) {
   }, [])
 
   return (
-    <button id="main-eclair-button" type={props.type} onClick={props.handleClick} className='fancybutton' data-text={props.text}>
-      <span className='fancytext'>
-        {props.text}
-      </span>
-    </button>
+    <div className='eclairButton-container'>
+      <button id="main-eclair-button" type={props.type} onClick={props.handleClick} className='fancybutton' data-text={props.text}>
+        <span className='fancytext'>
+          {props.text}
+        </span>
+      </button>
+    </div>
   )
 }
 

src/components/ImageSlider.tsx → src/components/general/ImageSlider.tsx

@@ -4,12 +4,10 @@ import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa';
 
 
 
-interface Image {
-  image: string;
-}
+
 
 interface ImageSliderProps {
-  slides: Image[]; // Change the type of the 'slides' prop to be an array of objects with an 'image' property
+  slides: string[]; // Change the type of the 'slides' prop to be an array of objects with an 'image' property
 }
 
 const ImageSlider: FunctionComponent<ImageSliderProps> = ({ slides }) => {
@@ -39,7 +37,7 @@ const ImageSlider: FunctionComponent<ImageSliderProps> = ({ slides }) => {
                 key={index}
               >
                 {index === current && (
-                  <img src={slide.image} alt='travel image' className='image' style={{maxHeight: '15rem', maxWidth:'20rem'}}/>
+                  <img src={slide} alt='travel image' className='image' style={{maxHeight: '15rem', maxWidth:'20rem'}}/>
                 )}
               </div>
             );

src/components/ImageProjectCard.tsx → src/components/projects/ProjectCard.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import {useState, useRef, forwardRef, useEffect} from 'react';
-import '../styles/imageprojectcard.css';
+import '../../styles/projects/projectcard.css';
 
 interface Props {
     img: string;
     name: string;
-    lName : String;
-    members : String;
-    desc : String;
-    git : String;
-    gantt : String;
-    vid : string;
+    vid?: string;
 
     onOpenPopup : () => void;
 
 }
 
-const ImageProjectCard = forwardRef<HTMLDivElement, Props>((props : Props, ref) => {
+const ProjectCard = forwardRef<HTMLDivElement, Props>((props : Props, ref) => {
     const [imgLoaded, setImgLoaded] = useState(false);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [isHovering, setIsHovering] = useState(false);
@@ -41,12 +36,10 @@ const ImageProjectCard = forwardRef<HTMLDivElement, Props>((props : Props, ref)
                 <div className="clickText">Click to learn more!</div>
             </div>
             <img src={props.img} onLoad={loadComplete} className="cardImage"></img>
-            <img src={props.vid} className='projectVideo'></img>
-            {/* <video className='projectVideo' ref={videoRef} controls={false} muted={true}>
-                <source src={TestVid}></source>
-            </video> */}
+            {props.vid && <img src={props.vid} className='projectVideo'></img>}
+
         </div>
     )
 });
 
-export default ImageProjectCard
+export default ProjectCard

src/components/projects/ProjectFilter.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../../styles/projects/projects.css';
+
+interface ProjectFilterProps {
+  curFilter: string;
+  setCurFilter: (filters: string) => void;
+  handleResize: () => void;
+}
+
+function ProjectFilter(props: ProjectFilterProps) {
+    //@ts-ignore
+    const handleFilterChange = (newFilters: string ) => {
+        props.handleResize();
+        props.setCurFilter(newFilters);
+        console.log("Filter changed to: ", newFilters);
+    };
+
+
+    return (
+    <div className='filterContainer'>
+        <ul className='filterOptions'>
+        <li className={`filterOption  ${props.curFilter === "inprogress"? 'currentSetFilter' : ""}`} onClick={() => handleFilterChange("inprogress")}>In-Progress</li>
+        <li className={`filterOption  ${props.curFilter === "completed"? 'currentSetFilter' : ""}`} onClick={() => handleFilterChange("completed")}>Completed</li>
+        <li className={`filterOption ${props.curFilter ==="all" ? 'currentSetFilter' : ""}`} onClick={() => handleFilterChange("all")}>All</li>
+        </ul>
+    </div>
+    )
+}
+
+export default ProjectFilter

src/components/Popup.tsx → src/components/projects/ProjectPopup.tsx

@@ -1,11 +1,8 @@
 import React, {useRef} from "react";
-import '../styles/popup.css';
+import '../../styles/projects/popup.css';
 import styled, { keyframes } from 'styled-components'; 
-import ImageSlider from '../components/ImageSlider';
+import ImageSlider from '../general/ImageSlider';
 
-interface Image {
-  image: string;
-}
 
 interface Props {
     cardInfo : {
@@ -14,17 +11,17 @@ interface Props {
         name: string;
         lName: string;
         members ?: string;
-        desc: string;
+        desc ?: string;
         git ?: string;
         gantt ?: string;
         rect ?: DOMRect;
-        SliderData ?: Array<Image>;
+        SliderData ?: Array<string>;
     } | null;
     onClose : () => void;
     vis : boolean;
 }
 
-function Popup(props : Props) {
+function ProjectPopup(props : Props) {
     const popupAnimation = (rect ?: DOMRect) => keyframes`
     0% { transform: translateY(${ props.cardInfo!.rect!.top + 'px' }) translateX(calc(${props.cardInfo!.rect!.left}px - 50vw + 50%)); transform-origin: ${props.cardInfo!.rect!.left > (window.innerWidth * 0.6) ? 'right' : (props.cardInfo!.rect!.left < (window.innerWidth * 0.4) ? 'left' : '')}  ${props.cardInfo!.rect!.top < (window.innerHeight * 0.3) ? 'top' : (props.cardInfo!.rect!.top > (window.innerHeight * 0.6) ? 'bottom' : '')}; scale: 0.1;} 
     100% { transform: translateY(0)  translateX(0px); transform-origin: center; scale: 1;}
@@ -53,7 +50,6 @@ function Popup(props : Props) {
         <button className="closeButton" onClick={props.onClose}>X</button>
       </div>
         <h1 className='pName'>{props.cardInfo!.name}</h1>
-        <h3 className= 'subHeadings'>Contributors:</h3>
         <div className='lead'> 
             {/* {props.cardInfo!.lName} */}
             <span className='category'>
@@ -75,11 +71,11 @@ function Popup(props : Props) {
             <span className='popupDivider'></span>
         </div>
         <h3 className= 'subHeadings'>Purpose:</h3>
-        <div className='desc'>
+        {props.cardInfo?.desc && <div className='desc'>
             <span className= 'displayContent'>
                 {props.cardInfo!.desc}
             </span>
-        </div>
+        </div>}
         <div className="divHolder">
             <span className='popupDivider'></span>
         </div>
@@ -108,4 +104,4 @@ function Popup(props : Props) {
   );
 }
 
-export default Popup;
+export default ProjectPopup;

src/components/ImageSlideCard.tsx → src/components/projects/ResourcesCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {useState, useRef, forwardRef, useEffect} from 'react';
-import '../styles/imageslidecard.css';
+import {forwardRef} from 'react';
+import '../../styles/projects/resourcescard.css';
 
 
 interface Props {
@@ -12,7 +12,7 @@ interface Props {
     key: number;
 }
 
-const ImageSlideCard = forwardRef<HTMLDivElement, Props>((props : Props, ref) => {
+const ResourcesCard = forwardRef<HTMLDivElement, Props>((props : Props, ref) => {
 
     return (
         <div className="entireCard1" onClick={props.openSlides} ref ={ref} >
@@ -22,12 +22,8 @@ const ImageSlideCard = forwardRef<HTMLDivElement, Props>((props : Props, ref) =>
                 <div className="clickText">Click to view slides!</div>
             </div>
             <img src={props.img} className="cardImage"></img>
-            {/* <img src={props.vid} className='projectVideo'></img> */}
-            {/* <video className='projectVideo' ref={videoRef} controls={false} muted={true}>
-                <source src={TestVid}></source>
-            </video> */}
         </div>
     )
 });
 
-export default ImageSlideCard
+export default ResourcesCard

src/components/CurrentSponsorCard.tsx → src/components/sponsors/SponsorCard.tsx

@@ -1,13 +1,13 @@
-import '../styles/sponsors.css'
+import '../../styles/sponsors/sponsors.css'
 import React from 'react';
 
-interface CurrentSponsorCardProps {
+interface SponsorCardProps {
   img: string,
   color: string,
   link: string,
 }
 
-function CurrentSponsorCard(props: CurrentSponsorCardProps) {
+function SponsorCard(props: SponsorCardProps) {
 
   return (
     <a className='currentSponsorCard' href={props.link}>
@@ -16,4 +16,4 @@ function CurrentSponsorCard(props: CurrentSponsorCardProps) {
   )
 }
 
-export default CurrentSponsorCard
+export default SponsorCard

src/components/sponsors/SponsorRow.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import '../../styles/sponsors/sponsors.css';
+import texelArts from '../../static/images/sponsor-images/texelArts.webp'
+import texasRobotics from '../../static/images/sponsor-images/texasRobotics.webp'
+import serviceNow from '../../static/images/sponsor-images/serviceNow.webp'
+import SponsorCard from './SponsorCard';
+function SponsorRow() {
+  return (
+    <div className='currentSponsorRow'>
+      <SponsorCard img={serviceNow} color='rgb(30, 59, 61)' link='https://www.servicenow.com/?campid=223920&cid=p:all:dg:b:rmkt:exa:goog_en_top-res-enterprise:ams:all&s_kwcid=AL!11692!3!729322432205!e!!g!!servicenow&ds_c=GOOG_AMS_All_EN_DEMANDGEN_ALBU_RLSA_Brand_EXA_Top-Res-Enterprise&cmcid=71700000121085979&ds_ag=ServiceNow_EXA&cmpid=58700008837571500&ds_kids=p81376383604&gad_source=1&gclid=Cj0KCQiA4rK8BhD7ARIsAFe5LXIyES94ECRa8US5GU_B1JMIUY_Ml7u5RmpAfR7Gj0AEGSxgqNOKyiYaAnzMEALw_wcB&gclsrc=aw.ds'/>
+      <SponsorCard img={texasRobotics} color='white' link='https://robotics.utexas.edu/'/>
+      <SponsorCard img={texelArts} color='white' link='https://texel-arts.com/'/>
+    </div>
+  )
+}
+
+export default SponsorRow