Added latest announcements section

NUSComputingDev · Mar 3, 2024 · edeafa1 · edeafa1
1 parent 3a7f8af
commit edeafa1
Show file tree

Hide file tree

Showing 14 changed files with 377 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,17 @@
   <head>
     <meta charset='UTF-8'>
     <link rel='icon' type='image/png' href='/comclub_logo.png'>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="UTF-8"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+    />
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>NUS Students' Computing Club</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
-    "react-router-dom": "^6.21.1"
+    "react-router-dom": "^6.21.1",
+    "react-slick": "^0.30.2"
   },
   "devDependencies": {
     "@html-eslint/eslint-plugin": "^0.22.0",

diff --git a/public/announcements/bash.jpg b/public/announcements/bash.jpg
diff --git a/public/announcements/ffc.jpg b/public/announcements/ffc.jpg
diff --git a/public/announcements/fow.jpg b/public/announcements/fow.jpg
diff --git a/public/announcements/fsc.jpg b/public/announcements/fsc.jpg
diff --git a/src/pages/home/AnnouncementsCard.css b/src/pages/home/AnnouncementsCard.css
@@ -0,0 +1,74 @@
+.container {
+    @apply
+        flex
+        flex-row
+        max-w-full
+        h-[30vh]
+        lg:h-[30vh]
+        items-center
+        justify-center
+        md:justify-around
+        px-2
+        md:gap-2
+
+    ;
+  }
+
+.container>img {
+  @apply
+      object-cover
+      p-4
+      w-32
+      md:w-48
+      max-h-[30vh]
+      rounded-3xl
+  ;
+}
+
+.text-container {
+  @apply
+      flex
+      flex-col
+      lg:p-4
+      max-h-full
+  ;
+}
+
+.text-container>h2 {
+  @apply
+    font-bold
+    text-sm
+    md:text-xl
+  ;
+}
+
+.text-container>h3 {
+  @apply
+    font-subheading
+    text-xs
+    md:text-sm
+    pb-4
+  ;
+}
+
+.text-container>p {
+  @apply
+    line-clamp-2
+    font-body
+    text-xs
+    md:text-sm
+  ;
+}
+
+.text-container>h4 {
+  @apply
+    text-right
+    text-primary
+    font-subheading
+    p-2
+    text-xs
+    md:text-base
+  ;
+}
+
+
diff --git a/src/pages/home/AnnouncementsCard.tsx b/src/pages/home/AnnouncementsCard.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import WindowCard from '../../layout/WindowCard';
+import './AnnouncementsCard.css';
+import { Link } from 'react-router-dom';
+
+interface AnnouncementsCardProps {
+  title: string;
+  desc: string;
+  date: string;
+  imgSrc: string;
+  link: string;
+}
+
+export default function AnnouncementsCard(props: AnnouncementsCardProps) {
+  const content = (
+    <div className='container'>
+      <img src={props.imgSrc}></img>
+      <div className='text-container'>
+        <h2>{props.title}</h2>
+        <h3>{props.date}</h3>
+        <p>{props.desc}</p>
+        <h4>
+            <Link to={props.link}>Read More</Link>
+        </h4>
+      </div>
+    </div>
+  );
+
+  return (
+    <WindowCard content={content}></WindowCard>
+  );
+}
diff --git a/src/pages/home/Carousel.css b/src/pages/home/Carousel.css
@@ -0,0 +1,39 @@
+.item {
+    @apply
+      p-8
+      md:p-14
+    ;
+}
+
+.slick-arrow.slick-next,
+.slick-arrow.slick-prev{
+  @apply
+    flex
+    justify-center
+    items-center
+    h-24
+    w-24
+    z-10
+    max-w-full
+  ;
+}
+
+.slick-prev::before,.slick-next::before{
+   display:none;
+}
+
+.arrows {
+    @apply
+      h-80
+      w-80
+      text-primary
+      opacity-60
+      z-10
+    ;
+}
+
+.arrows:hover {
+    @apply
+      opacity-100
+    ;
+}
diff --git a/src/pages/home/Carousel.tsx b/src/pages/home/Carousel.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import Slider from "react-slick";
+import AnnouncementsCard from './AnnouncementsCard';
+import './Carousel.css';
+import { GoChevronLeft, GoChevronRight } from "react-icons/go";
+import announcements from './announcements.json' with {type: 'json'};
+
+
+function NextArrow(props) {
+    const { className, style, onClick } = props;
+    return (
+    <div
+        className={className}
+        onClick={onClick}>
+          <GoChevronRight className="arrows" />
+        </div>
+    );
+  }
+
+  function PrevArrow(props) {
+    const { className, style, onClick } = props;
+    return (
+        <div
+            className={className}
+            onClick={onClick}>
+    <GoChevronLeft className="arrows"/></div>
+    );
+  }
+
+
+export default function Carousel() {
+  var settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
+    responsive: [
+        {
+          breakpoint: 1200,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            initialSlide: 1
+          }
+        },
+        {
+          breakpoint: 800,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            initialSlide: 1,
+            nextArrow: false,
+            prevArrow: false
+          }
+        }
+      ]
+  };
+
+
+  return (
+    <div className="slider-container">
+    <Slider {...settings}>
+      {announcements.map((announcement, index) => (
+        <div className='item' key={index}>
+          <AnnouncementsCard
+            title={announcement.title}
+            desc={announcement.desc}
+            date={announcement.date}
+            imgSrc={announcement.imgSrc}
+            link='./'
+          />
+        </div>
+      ))}
+    </Slider>
+    </div>
+  );
+}
diff --git a/src/pages/home/announcements.json b/src/pages/home/announcements.json
@@ -0,0 +1,26 @@
+[
+    {
+        "title": "Freshman Social Camp (FSC)",
+        "desc": "FSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.",
+        "date": "19th June - 22nd June 2024",
+        "imgSrc": "announcements/fsc.jpg"
+    },
+    {
+        "title": "Freshman Orientation Week (FOW)",
+        "desc": "FOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.",
+        "date": "24th July - 22nd July 2024",
+        "imgSrc": "announcements/fow.jpg"
+    },
+    {
+        "title": "Freshman Finale Camp (FFC)",
+        "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.",
+        "date": "5th August - 7th August 2024",
+        "imgSrc": "announcements/ffc.jpg"
+    },
+    {
+        "title": "Computing Bash",
+        "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.",
+        "date": "16th August 2024",
+        "imgSrc": "announcements/bash.jpg"
+    }
+]