Merge pull request #109 from UofTHacks-Official/92-photo-carousel-sec…

…tion

92 photo carousel section

package.json

@@ -15,11 +15,15 @@
     "npm": "^9.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.2.1",
+    "react-slick": "^0.30.2",
     "sharp": "^0.32.6",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.0.5",
     "typescript": "5.1.6"
   },
   "devDependencies": {
+    "@types/react-slick": "^0.23.13",
     "mini-css-extract-plugin": "^2.7.6",
     "prettier": "3.3.3"
   }

src/modules/photo-carousel/index.styles.tsx

@@ -0,0 +1,111 @@
+import styled from "styled-components";
+import Image from "next/image";
+import Subjectivity from "@/components/subjectivity";
+
+import nextArrowIcon from "public/assets/photo-carousel/nextArrow.png";
+import prevArrowIcon from "public/assets/photo-carousel/prevArrow.png";
+import {CSSProperties, MouseEventHandler} from "react";
+
+export const CarouselContainer = styled.div`
+  .slick-slide {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box; 
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    align-self: center;
+    display: flex;
+  }
+
+  .slick-arrow.slick-next,
+  .slick-arrow.slick-prev {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+  .slick-prev::before,
+  .slick-next::before {
+    display: none;
+  }
+  .slick-slide > div {
+    pointer-events: none;
+  }
+  }
+`;
+
+export const StyledImage = styled(Image)`
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  aspect-ratio: 1;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -ms-user-drag: none;
+  user-drag: none;
+`;
+
+export const StyledSubjectivity = styled(Subjectivity)`
+  color: #f9f9f9;
+  font-size: 48px;
+  letter-spacing: 0.72px;
+  -webkit-text-stroke: 1.7px #282828;
+  margin-bottom: 1rem;
+  margin-top: 5rem;
+`;
+
+export const ColourText = styled.span`
+  color: #F0C800;
+`;
+
+export const Arrow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  z-index: 1;
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+interface ArrowProps {
+  className?: string;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+export const NextArrow = ({ className, style, onClick }: ArrowProps) => {
+  return (
+    <Arrow
+      className={className}
+      style={{ ...style, right: 10 }}
+      onClick={onClick}
+    >
+      <Image src={nextArrowIcon} alt="Next" width={40} height={40} />
+    </Arrow>
+  );
+};
+
+export const PrevArrow = ({ className, style, onClick }: ArrowProps) => {
+  return (
+    <Arrow
+      className={className}
+      style={{ ...style, left: 10 }}
+      onClick={onClick}
+    >
+      <Image src={prevArrowIcon} alt="Previous" width={40} height={40} />
+    </Arrow>
+  );
+};
+

src/modules/photo-carousel/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Slider from "react-slick";
+import { CarouselContainer, StyledImage, StyledSubjectivity, ColourText,  NextArrow, PrevArrow} from "./index.styles";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+import pic1 from "public/assets/photo-carousel/pic1.png";
+import pic2 from "public/assets/photo-carousel/pic2.png";
+import pic3 from "public/assets/photo-carousel/pic3.png";
+
+const PhotoCarousel = () => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    centerMode: true,
+    centerPadding: "15%",  
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
+
+  };
+
+  return (
+    <CarouselContainer>
+        <StyledSubjectivity>
+        Photos from  <ColourText>UofTHacks 11</ColourText>
+      </StyledSubjectivity>
+      <Slider {...settings}>
+        <div>
+          <StyledImage src={pic1} alt="pic1" />
+        </div>
+        <div>
+          <StyledImage src={pic2} alt="pic2" />
+        </div>
+        <div>
+          <StyledImage src={pic3} alt="pic3" />
+        </div>
+      </Slider>
+    </CarouselContainer>
+  );
+};
+
+export default PhotoCarousel;

src/pages/main-site/index.tsx

@@ -6,6 +6,7 @@ import Sponsors from "@/modules/Sponsorship";
 import FAQ from "@/modules/FAQ";
 import PastProjects from "@/modules/past-projects";
 import Stats from "@/modules/stats";
+import PhotoCarousel from "@/modules/photo-carousel";
 import Footer from "@/modules/footer";
 import styled from "styled-components";
 import MLHBanner from "@/components/mlh-banner";
@@ -24,6 +25,7 @@ const Site11 = () => {
       <LandingPage />
       <EmailForm />
       <AboutUs />
+      <PhotoCarousel />
       <Stats />
       <PastProjects />
       <Sponsors />