diff --git a/src/sections/LandingSections/EditionsSection.js b/src/sections/LandingSections/EditionsSection.js
index 7d33625..39acba4 100644
--- a/src/sections/LandingSections/EditionsSection.js
+++ b/src/sections/LandingSections/EditionsSection.js
@@ -1,35 +1,232 @@
-import React from 'react';
-
-import EditionCards from "./EditionCards";
-
-const EditionsHeading = () => {
- document.documentElement.classList.remove("nav-open");
- const checkScroll = () => {
- const componentPosition = document.getElementsByClassName("add-animation");
- const scrollPosition = window.pageYOffset;
- for (var i = 0; i < componentPosition.length; i++) {
- var rec =
- componentPosition[i].getBoundingClientRect().top + window.scrollY + 100;
- if (scrollPosition + window.innerHeight >= rec) {
- componentPosition[i].classList.add("animated");
- } else if (scrollPosition + window.innerHeight * 0.8 < rec) {
- componentPosition[i].classList.remove("animated");
- }
- }
+import React from "react";
+import { Row, Col } from "reactstrap";
+
+const EditionCards = () => {
+ const [mob, setMob] = React.useState(true);
+ const [editions, setEditions] = React.useState([]);
+ const [loading, setLoading] = React.useState(true);
+ const [error, setError] = React.useState(null);
+
+ // Handle window resize
+ React.useEffect(() => {
+ const handleResize = () => {
+ const width = window.innerWidth;
+ setMob(width <= 900);
};
-
- React.useEffect(() => {
- document.body.classList.add("presentation-page");
- window.addEventListener("scroll", checkScroll);
- window.scrollTo(0, 0);
- document.body.scrollTop = 0;
- return function cleanup() {
- document.body.classList.remove("presentation-page");
- window.removeEventListener("scroll", checkScroll);
- };
- },[]);
+
+ // Set initial state
+ handleResize();
- return
-}
+ // Add event listener
+ window.addEventListener("resize", handleResize);
+
+ // Cleanup
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ // Fetch editions from API
+ React.useEffect(() => {
+ const fetchEditions = async () => {
+ try {
+ setLoading(true);
+ // Replace 'your-api-base-url' with your actual API base URL
+ const response = await fetch('https://api.dtutimes.com/v1/edition');
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!Array.isArray(data)) { setError('Received malformed data from the API'); return; }
+ // Take only the first 8 editions (newest)
+ const latestEditions = data.slice(0, 8);
+ setEditions(latestEditions);
+ setError(null);
+ } catch (err) {
+ console.error('Error fetching editions:', err);
+ setError('Failed to load editions');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchEditions();
+ }, []);
+
+ // Loading state
+ if (loading) {
+ return (
+
+ );
+ }
+
+ // Error state
+ if (error) {
+ return (
+
+ );
+ }
+
+ // Grid item class names for positioning
+ const gridClasses = [
+ "first-card", "second-card", "third-card", "fourth-card",
+ "fifth-card", "sixth-card", "seventh-card", "eight-card", "ninth-card"
+ ];
+
+ const renderEditionGrid = () => {
+ return editions.map((edition, index) => (
+
+
+ 
{
+ e.target.src = '/placeholder-edition.jpg'; // Fallback
+ }}
+ />
+
+
+ ));
+ };
+
+ if (mob === false) {
+ return (
+ <>
+
+
+
+
+
+
![...]({require("assets/img/icons/newspaper.png")})
+
+
+ Latest
+ {" "}
+
+ Editions
+
+
+
By DTU Times
+
+ The DTU Snapshot at a glance. Check out our latest editions,
+ containing interviews of the dignitaries and the celebrities
+ that visited DTU to the news of societies, faculties,
+ students and the University itself. And while you are at it
+ be sure to visit the Pulse section, filled to the brim with
+ the creativity of some of the most talented writers of our
+ University.
+
+
+
+
+
+
+ {renderEditionGrid()}
+
+
+
+
+
+
+
+
+
+
+ Latest
+ {" "}
+
+ Editions
+
+
+
By DTU Times
+
+ The DTU snapshot at a glance. Check out our latest editions
+ for a comprehensive summary of the happenings over the past
+ quarter.
+
+
+
+
+
+
+ {renderEditionGrid()}
+
+
+