Added new UI changes

astro/src/components/ContentGrid.jsx

@@ -51,7 +51,7 @@ function ContentGrid({ selectedYear }) {
             >
               <div className="p-6 space-y-4">
                 <h4 className="text-2xl font-semibold text-gray-100">{item.publication_date}</h4>
-                <img src={item.front_cover} alt={`Issue ${item.issue_number}`} className="w-full h-56 object-cover rounded-md" />
+                <img src={item.front_cover} alt={`Issue ${item.issue_number}`}  className="w-full h-56 object-contain rounded-md" />
                 <a
                   href={item.url}
                   className="text-indigo-400 hover:text-indigo-300 font-medium transition-colors duration-200"
@@ -69,4 +69,4 @@ function ContentGrid({ selectedYear }) {
   );
 }
 
-export default ContentGrid;
+export default ContentGrid;

astro/src/components/FilterPage.css

@@ -1,39 +1,38 @@
 .filter-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 30px;
-    gap: 15px;
-    flex-wrap: wrap;
-  }
-
-  .filter-group {
-    display: flex;
-    gap: 15px;
-    flex-wrap: wrap;
-  }
-
-  .search-btn {
-    margin-left: auto;
-    padding: 12px 25px;
-    font-size: 14px;
-    font-weight: 600;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
-  }
-
-  .search-btn:hover {
-    background-color: #0056b3;
-    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
-  }
-
-
-  .search-btn:focus {
-    outline: none;
-  }
-
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30px;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.filter-group {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+.search-btn {
+  margin-left: auto;
+  padding: 12px 25px;
+  font-size: 14px;
+  font-weight: 600;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
+}
+
+.search-btn:hover {
+  background-color: #0056b3;
+  box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
+}
+
+
+.search-btn:focus {
+  outline: none;
+}

astro/src/components/FilterPage.jsx

@@ -35,10 +35,10 @@ const FilterPage = () => {
     setLoading(true);
     setError(null);
     setResults([]);
-
+  
     try {
       let params = "";
-
+  
       if (filterType === "month") {
         if (startMonth && startYear && endMonth && endYear) {
           params = `?date_begin=${startMonth}-${startYear}&date_end=${endMonth}-${endYear}`;
@@ -49,19 +49,19 @@ const FilterPage = () => {
         }
       } else if (filterType === "issue") {
         if (startIssue && startIssueYear && endIssue && endIssueYear) {
-          params = `?issue_begin=${startIssue}&issue_year_begin=${startIssueYear}&issue_end=${endIssue}&issue_year_end=${endIssueYear}`;
+          params = `?issue_begin=${startIssue}-${startIssueYear}&issue_end=${endIssue}-${endIssueYear}`;
         } else {
           alert("Please select issue numbers and years for both start and end.");
           setLoading(false);
           return;
         }
       }
-
+  
       const response = await fetch(`${API_URL}${params}`);
       if (!response.ok) {
         throw new Error("Failed to fetch search results");
       }
-
+  
       const result = await response.json();
       setResults(result);
     } catch (err) {
@@ -70,6 +70,7 @@ const FilterPage = () => {
       setLoading(false);
     }
   };
+
 
   if (loading) return <p className="text-white">Loading...</p>;
   if (error) return <p className="text-white">Error: {error}</p>;
@@ -212,7 +213,9 @@ const FilterPage = () => {
       {/* Results Display */}
       <div className="mt-6">
         {results.length > 0 ? (
-          <FilterPageContent items={results} />
+           <FilterPageContent items={results} loading={loading} />
+
+
         ) : (
           <p className="text-gray-500">No results found. Try adjusting your filters.</p>
         )}

astro/src/components/FilterPageContent.jsx

@@ -1,21 +1,42 @@
 import React from "react";
 
-function FilterPageContent({ items }) {
+function FilterPageContent({ items, loading }) {
   return (
     <div className="mt-12 px-4 sm:px-6 lg:px-8 bg-gray-900 min-h-screen">
-      <h3 className="text-4xl font-bold mb-10 text-white tracking-tight leading-tight">Magazine Issues</h3>
-      {items.length > 0 ? (
+      <h3 className="text-4xl font-bold mb-10 text-white tracking-tight leading-tight">
+        Magazine Issues
+      </h3>
+
+      {loading ? (
+        // Show skeleton loaders when data is loading
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div
+              key={index}
+              className="bg-gray-800 rounded-lg shadow-lg animate-pulse"
+            >
+              <div className="w-full h-48 bg-gray-700 rounded-t-lg"></div>
+              <div className="p-6 space-y-4">
+                <div className="w-2/3 h-6 bg-gray-700 rounded"></div>
+                <div className="w-1/2 h-4 bg-gray-700 rounded"></div>
+                <div className="w-1/3 h-4 bg-gray-700 rounded"></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : items.length > 0 ? (
+        // Show actual content when loading is done
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
           {items.map((item, index) => (
             <div
               key={index}
               className="bg-gray-800 text-white rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-105"
             >
-              <div>
+              <div className="overflow-hidden">
                 <img
                   src={item.front_cover}
                   alt={`Cover of issue ${item.issue_number}`}
-                  className="rounded-t-lg w-full h-48 object-cover"
+                  className="rounded-t-lg w-full object-cover h-48"
                 />
               </div>
               <div className="p-6 space-y-4">

astro/src/components/Navbar.jsx

@@ -37,4 +37,4 @@ function Navbar({ showAdvancedSearch, setShowAdvancedSearch }) {
   );
 }
 
-export default Navbar;
+export default Navbar;

astro/src/components/Searchbar.jsx

@@ -167,4 +167,4 @@ function MagazineArchive({ onYearSelect }) {
   );
 }
 
-export default MagazineArchive;
+export default MagazineArchive;

astro/src/components/parentfile.jsx

@@ -1,21 +1,32 @@
-import React, { useState } from "react";
-import MagazineArchive from "./Searchbar";  // Assuming this is your search bar component
+import React, { useState, useEffect } from "react";
+import MagazineArchive from "./Searchbar"; // Search bar component
 import ContentGrid from "./ContentGrid";
 
 function MagazineApp() {
-    const [selectedYear, setSelectedYear] = useState(null);
-
-    // console.log('Selected Year:', selectedYear);  // Check if the selected year is logged
-
-    return (
-      <div className="bg-gray-900 min-h-screen">
-        <MagazineArchive onYearSelect={setSelectedYear} />
-
-        {/* Content Grid Component */}
-        {selectedYear && <ContentGrid selectedYear={selectedYear} />}
-      </div>
-    );
-  }
-
+  const [selectedYear, setSelectedYear] = useState(null);
+  const [loading, setLoading] = useState(true); // State for loader
+
+  // Simulate API or content loading
+  useEffect(() => {
+    setTimeout(() => setLoading(false), 1500); // Simulate loading for 1.5s
+  }, []);
+
+  return (
+    <div className="bg-gray-900 min-h-screen">
+      {/* Show loader while loading */}
+      {loading ? (
+        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 z-50">
+          <div className="w-12 h-12 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
+        </div>
+      ) : (
+        <>
+          <MagazineArchive onYearSelect={setSelectedYear} />
+          {/* Show ContentGrid only when a year is selected */}
+          {selectedYear && <ContentGrid selectedYear={selectedYear} />}
+        </>
+      )}
+    </div>
+  );
+}
 
 export default MagazineApp;