Daniel zavala11 news cs branch

client/package.json

@@ -79,7 +79,7 @@
 		"prettier": "2.7.1",
 		"prettier-eslint-cli": "^6.0.1",
 		"rollup-plugin-visualizer": "^5.8.3",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.2.3",
 		"terser": "^5.15.1",
 		"vite": "^3.1.8"
 	}

client/src/App.jsx

@@ -2,13 +2,15 @@ import { lazy, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import NavigationBar from "./components/navbar/NavigationBar";
+import data from "./utils/NewsData";
 
 import { ErrorState, LoadingState } from "./components/states";
 
 const Homepage = lazy(() => import("./pages/home/Homepage"));
 const Events = lazy(() => import("./pages/events/Events"));
 const Projects = lazy(() => import("./pages/projects/Projects"));
 const Resources = lazy(() => import("./pages/resources/Resources"));
+const News = lazy(() => import("./pages/news/News"))
 
 function App() {
 	return (
@@ -21,6 +23,7 @@ function App() {
 						<Route path="/events" element={<Events />} />
 						<Route path="/projects" element={<Projects />} />
 						<Route path="/resources" element={<Resources />} />
+						<Route path="/news/:year/:title" element={<News data={data} />} />
 						<Route path="*" element={<Navigate to="/homepage" replace />} />
 					</Routes>
 				</Suspense>

client/src/pages/home/Homepage.jsx

@@ -1,14 +1,34 @@
 import About from "./components/about/About";
 import ContactUs from "./components/contact-us/ContactUs";
+import NewsSection from "./components/news-section/NewsSection";
+import PropTypes from "prop-types";
 
-function Home() {
+function Home({ data }) {
 	return (
 		<>
 			<div>Home</div>
 			<About />
+			<NewsSection data={data} />
 			<ContactUs />
 		</>
 	);
 }
 
 export default Home;
+
+
+Home.propTypes = {
+	data: PropTypes.arrayOf(Object).isRequired,
+}
+
+Home.defaultProps = {
+	data: [{title: "Lorem Ipsum",
+	month: "January",
+	day: 1,
+	year: 2022,
+	description: "Lorem Ipsum",
+	links: [
+		"https://en.wikipedia.org/wiki/Computer_science",
+	],},
+	],
+}

client/src/pages/home/components/news-section/NewsSection.jsx

@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+import Carousel from "./carousel/Carousel";
+
+
+
+function NewsSection({ data }) {
+	return (
+		<div className="news-section-container mt-[70px]">
+			{data.length === 0 && <h1 className="no-news-title text-center text-5xl text-white">No News</h1>}
+			{data.length > 0 && <h1 className="news-title m-auto max-w-[920px] w-[80%] underline text-5xl text-white news-md:w-[90%]"><span className="ml-[2rem] news-md:m-[.9rem] news-sec-sm:m-0">Latest News</span></h1>}
+			{data.length > 0 && (
+				<div className="carousel-container flex justify-center my-[20px] bg-black">
+					<Carousel data={data} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default NewsSection;
+
+NewsSection.propTypes = {
+	data: PropTypes.arrayOf(Object).isRequired,
+}

client/src/pages/home/components/news-section/carousel/Card.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+
+
+function Card(props) {
+	const {
+		title,
+		month,
+		day,
+		year,
+		description,
+		transitionRight,
+		transitionLeft,
+	} = props;
+	return (
+		<div
+			key={title}
+			className={
+				transitionRight
+					? "element-right relative shadow-[1.5px_4px_3px_4px_black] h-[260px] min-w-[275px] max-w-[270px] bg-[grey] text-white p-[10px] m-[10px] text-left rounded-md box-border flex flex-col justify-end space-y-2.5 z-0 animate-cardSlidingLeft hover:shadow-[5px_8px_6px_8px_black] news-sm:animate-cardSlidingLeftSm"
+					: transitionLeft
+					? "element-left relative shadow-[1.5px_4px_3px_4px_black] h-[260px] min-w-[275px] max-w-[270px] bg-[grey] text-white p-[10px] m-[10px] text-left rounded-md box-border flex flex-col justify-end space-y-2.5 z-0 animate-cardSlidingRight hover:shadow-[5px_8px_6px_8px_black] news-sm:animate-cardSlidingRightSm"
+					: "element shadow-[1.5px_4px_3px_4px_black] h-[260px] min-w-[275px] max-w-[270px] bg-[grey] text-white p-[10px] m-[10px] text-left rounded-md box-border flex flex-col justify-end space-y-2.5 z-0 hover:shadow-[5px_8px_6px_8px_black]"
+			}
+		>
+			<h1 className="element-date w-full m-0 h-auto text-xl font-bold">{`${month} ` + ((day >= 1 && day < 10) ? `0${day}` : `${day}`) + `, ${year}`}</h1>
+
+			{[...title].length === 0 && <h2 className="element-title text-green-700 text-base">None</h2>}
+			{[...title].length > 0 && [...title].length < 40 && (
+				<h2 className="element-title text-green-700 text-base">{title}</h2>
+			)}
+			{[...title].length > 0 && [...title].length >= 40 && (
+				<h2 className="element-title text-green-700 text-base">{`${title.substring(0, 36)}...`}</h2>
+			)}
+
+			{[...description].length === 0 && (
+				<p className="element-description h-[120px] w-full text-base">Empty</p>
+			)}
+			{[...description].length > 0 && [...description].length < 140 && (
+				<p className="element-description h-[120px] w-full text-base">{description}</p>
+			)}
+			{[...description].length > 0 && [...description].length >= 140 && (
+				<p className="element-description h-[120px] w-full text-base">
+					{`${description.substring(0, 137)}...`}
+				</p>
+			)}
+
+			<Link className="learn-more-button py-[10px] px-[40px] border-[3px] border-[orange] rounded-sm text-center w-fit text-xs whitespace-nowrap hover:bg-[orange] hover:text-black" to={`/news/${year}/${title}`}>
+				Learn More
+			</Link>
+		</div>
+	);
+}
+
+export default Card;
+
+
+Card.propTypes = {
+	title: PropTypes.string.isRequired,
+	month: PropTypes.string.isRequired,
+	day: PropTypes.number.isRequired,
+	year: PropTypes.number.isRequired,
+	description: PropTypes.string.isRequired,
+	transitionRight: PropTypes.bool.isRequired,
+	transitionLeft: PropTypes.bool.isRequired,
+}