feat(ui): add clubs carousel

Author: Aksh-Bansal-dev

ui/package-lock.json

@@ -16,6 +16,7 @@
     "history": "^5.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-multi-carousel": "^2.8.2",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.3.0",
     "react-toastify": "^9.0.5"

ui/package.json

@@ -2,5 +2,9 @@
 export const logo = new URL('./images/logo.svg', import.meta.url).href;
 export const dummyNewsImg = new URL('./images/dummy_news.jpg', import.meta.url)
   .href;
+export const dummyClubLogo = new URL(
+  './images/dummy-club-logo.png',
+  import.meta.url
+).href;
 export const loginArrow = new URL('./images/login-arrow.svg', import.meta.url)
   .href;

ui/src/assets/images/dummy-club-logo.png

@@ -0,0 +1,65 @@
+import styles from './styles.module.css';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import {dummyClubLogo} from '../../assets';
+
+const data = [
+  {
+    name: 'TPC',
+    category: 'Technical',
+    logoUrl: dummyClubLogo,
+  },
+  {
+    name: 'Jazbaat',
+    category: 'Cultural',
+    logoUrl: dummyClubLogo,
+  },
+  {
+    name: 'Basketball',
+    category: 'Sports',
+    logoUrl: dummyClubLogo,
+  },
+  {
+    name: 'Saaz',
+    category: 'Cultural',
+    logoUrl: dummyClubLogo,
+  },
+  {
+    name: 'Badminton',
+    category: 'Sports',
+    logoUrl: dummyClubLogo,
+  },
+];
+
+export const ClubsCarousel: React.FC = () => {
+  const responsive = {
+    desktop: {
+      breakpoint: {max: 5000, min: 1024},
+      items: 4,
+    },
+    tablet: {
+      breakpoint: {max: 1024, min: 800},
+      items: 2,
+    },
+    mobile: {
+      breakpoint: {max: 800, min: 0},
+      items: 1,
+    },
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.heading}>Clubs</div>
+      <Carousel responsive={responsive} className={styles.carousel}>
+        {data.map((club, i) => (
+          <div key={i} className={styles.card}>
+            <img src={club.logoUrl} alt="club" />
+            <div>
+              <div className={styles.name}>{club.name}</div>
+              <div className={styles.category}>{club.category}</div>
+            </div>
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  );
+};

ui/src/assets/index.ts

@@ -0,0 +1,53 @@
+.container {
+  margin-top: 8vh;
+}
+
+.heading {
+  background-color: var(--primary-color);
+  width: fit-content;
+  padding: 1.5vh 3vh;
+  border-radius: 15px;
+  color: var(--secondary-color);
+  font-weight: 600;
+  margin-bottom: 2vh;
+  margin-left: 3vw;
+}
+
+.carousel {
+  padding: 4vh 3vw;
+  width: 97%;
+}
+
+.card {
+  background-color: var(--off-white);
+  width: 235px;
+  height: 120px;
+  transition: scale 1s;
+  box-shadow: 5.57653px 5.57653px 22.3061px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  padding: 3vh;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card:hover {
+  transform: scale(1.1);
+  background-color: var(--secondary-color);
+}
+
+.card img {
+  width: 72px;
+}
+
+.name {
+  color: var(--primary-text);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.category {
+  color: var(--secondary-text);
+  font-size: 0.9rem;
+}

ui/src/components/ClubsCarousel/index.tsx

@@ -6,6 +6,7 @@
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
+  margin: 0 4vw;
 }
 .leftContainer {
   width: 30%;

ui/src/components/ClubsCarousel/styles.module.css

@@ -10,6 +10,7 @@
   padding: 1vh;
   display: flex;
   align-items: center;
+  margin-right: 5vh;
 }
 
 .profileInfoContainer img {

ui/src/components/NewsCarousel/styles.module.css

@@ -5,6 +5,7 @@ body {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 * {
@@ -20,4 +21,6 @@ body {
 
   --primary-color: #d81f26;
   --secondary-color: white;
+
+  --off-white: #f6f7fe;
 }

ui/src/components/TopBar/styles.module.css

@@ -1,3 +1,4 @@
+import {ClubsCarousel} from '../../components/ClubsCarousel';
 import {NewsCarousel} from '../../components/NewsCarousel';
 import {TopBar} from '../../components/TopBar';
 import styles from './styles.module.css';
@@ -9,6 +10,7 @@ export const Home: React.FC = () => {
       <div className={styles.mainContent}>
         <TopBar />
         <NewsCarousel />
+        <ClubsCarousel />
       </div>
     </div>
   );

ui/src/index.css

@@ -1,5 +1,5 @@
 .container {
-  height: 100vh;
+  min-height: 100vh;
   width: 100vw;
   background-color: #f4f5f7;
   display: flex;
@@ -10,7 +10,6 @@
 }
 .mainContent {
   width: 82%;
-  padding: 0 4vw;
 }
 
 @media only screen and (max-width: 700px) {