Skip to content

Commit c7f3b6b

Browse files
kabirlohanakabirlohana
authored
Merge pull request #14 from kabirlohana/aishwarya_final_changes
Added new UI changes
2 parents 739be45 + d0e8757 commit c7f3b6b

File tree

7 files changed

+103
-69
lines changed

7 files changed

+103
-69
lines changed

‎astro/src/components/ContentGrid.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function ContentGrid({ selectedYear }) {
5151
>
5252
<div className="p-6 space-y-4">
5353
<h4 className="text-2xl font-semibold text-gray-100">{item.publication_date}</h4>
54-
<img src={item.front_cover} alt={`Issue ${item.issue_number}`} className="w-full h-56 object-cover rounded-md" />
54+
<img src={item.front_cover} alt={`Issue ${item.issue_number}`} className="w-full h-56 object-contain rounded-md" />
5555
<a
5656
href={item.url}
5757
className="text-indigo-400 hover:text-indigo-300 font-medium transition-colors duration-200"
@@ -69,4 +69,4 @@ function ContentGrid({ selectedYear }) {
6969
);
7070
}
7171

72-
export default ContentGrid;
72+
export default ContentGrid;

‎astro/src/components/FilterPage.css‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
.filter-row {
2-
display: flex;
3-
align-items: center;
4-
justify-content: space-between;
5-
margin-bottom: 30px;
6-
gap: 15px;
7-
flex-wrap: wrap;
8-
}
9-
10-
.filter-group {
11-
display: flex;
12-
gap: 15px;
13-
flex-wrap: wrap;
14-
}
15-
16-
.search-btn {
17-
margin-left: auto;
18-
padding: 12px 25px;
19-
font-size: 14px;
20-
font-weight: 600;
21-
background-color: #007bff;
22-
color: white;
23-
border: none;
24-
border-radius: 8px;
25-
cursor: pointer;
26-
transition: all 0.3s ease;
27-
box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
28-
}
29-
30-
.search-btn:hover {
31-
background-color: #0056b3;
32-
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
33-
}
34-
35-
36-
.search-btn:focus {
37-
outline: none;
38-
}
39-
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
margin-bottom: 30px;
6+
gap: 15px;
7+
flex-wrap: wrap;
8+
}
9+
10+
.filter-group {
11+
display: flex;
12+
gap: 15px;
13+
flex-wrap: wrap;
14+
}
15+
16+
.search-btn {
17+
margin-left: auto;
18+
padding: 12px 25px;
19+
font-size: 14px;
20+
font-weight: 600;
21+
background-color: #007bff;
22+
color: white;
23+
border: none;
24+
border-radius: 8px;
25+
cursor: pointer;
26+
transition: all 0.3s ease;
27+
box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
28+
}
29+
30+
.search-btn:hover {
31+
background-color: #0056b3;
32+
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.5);
33+
}
34+
35+
36+
.search-btn:focus {
37+
outline: none;
38+
}

‎astro/src/components/FilterPage.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ const FilterPage = () => {
3535
setLoading(true);
3636
setError(null);
3737
setResults([]);
38-
38+
3939
try {
4040
let params = "";
41-
41+
4242
if (filterType === "month") {
4343
if (startMonth && startYear && endMonth && endYear) {
4444
params = `?date_begin=${startMonth}-${startYear}&date_end=${endMonth}-${endYear}`;
@@ -49,19 +49,19 @@ const FilterPage = () => {
4949
}
5050
} else if (filterType === "issue") {
5151
if (startIssue && startIssueYear && endIssue && endIssueYear) {
52-
params = `?issue_begin=${startIssue}&issue_year_begin=${startIssueYear}&issue_end=${endIssue}&issue_year_end=${endIssueYear}`;
52+
params = `?issue_begin=${startIssue}-${startIssueYear}&issue_end=${endIssue}-${endIssueYear}`;
5353
} else {
5454
alert("Please select issue numbers and years for both start and end.");
5555
setLoading(false);
5656
return;
5757
}
5858
}
59-
59+
6060
const response = await fetch(`${API_URL}${params}`);
6161
if (!response.ok) {
6262
throw new Error("Failed to fetch search results");
6363
}
64-
64+
6565
const result = await response.json();
6666
setResults(result);
6767
} catch (err) {
@@ -70,6 +70,7 @@ const FilterPage = () => {
7070
setLoading(false);
7171
}
7272
};
73+
7374

7475
if (loading) return <p className="text-white">Loading...</p>;
7576
if (error) return <p className="text-white">Error: {error}</p>;
@@ -212,7 +213,9 @@ const FilterPage = () => {
212213
{/* Results Display */}
213214
<div className="mt-6">
214215
{results.length > 0 ? (
215-
<FilterPageContent items={results} />
216+
<FilterPageContent items={results} loading={loading} />
217+
218+
216219
) : (
217220
<p className="text-gray-500">No results found. Try adjusting your filters.</p>
218221
)}

‎astro/src/components/FilterPageContent.jsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,42 @@
11
import React from "react";
22

3-
function FilterPageContent({ items }) {
3+
function FilterPageContent({ items, loading }) {
44
return (
55
<div className="mt-12 px-4 sm:px-6 lg:px-8 bg-gray-900 min-h-screen">
6-
<h3 className="text-4xl font-bold mb-10 text-white tracking-tight leading-tight">Magazine Issues</h3>
7-
{items.length > 0 ? (
6+
<h3 className="text-4xl font-bold mb-10 text-white tracking-tight leading-tight">
7+
Magazine Issues
8+
</h3>
9+
10+
{loading ? (
11+
// Show skeleton loaders when data is loading
12+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
13+
{Array.from({ length: 6 }).map((_, index) => (
14+
<div
15+
key={index}
16+
className="bg-gray-800 rounded-lg shadow-lg animate-pulse"
17+
>
18+
<div className="w-full h-48 bg-gray-700 rounded-t-lg"></div>
19+
<div className="p-6 space-y-4">
20+
<div className="w-2/3 h-6 bg-gray-700 rounded"></div>
21+
<div className="w-1/2 h-4 bg-gray-700 rounded"></div>
22+
<div className="w-1/3 h-4 bg-gray-700 rounded"></div>
23+
</div>
24+
</div>
25+
))}
26+
</div>
27+
) : items.length > 0 ? (
28+
// Show actual content when loading is done
829
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
930
{items.map((item, index) => (
1031
<div
1132
key={index}
1233
className="bg-gray-800 text-white rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-105"
1334
>
14-
<div>
35+
<div className="overflow-hidden">
1536
<img
1637
src={item.front_cover}
1738
alt={`Cover of issue ${item.issue_number}`}
18-
className="rounded-t-lg w-full h-48 object-cover"
39+
className="rounded-t-lg w-full object-cover h-48"
1940
/>
2041
</div>
2142
<div className="p-6 space-y-4">

‎astro/src/components/Navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,4 @@ function Navbar({ showAdvancedSearch, setShowAdvancedSearch }) {
3737
);
3838
}
3939

40-
export default Navbar;
40+
export default Navbar;

‎astro/src/components/Searchbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,4 +167,4 @@ function MagazineArchive({ onYearSelect }) {
167167
);
168168
}
169169

170-
export default MagazineArchive;
170+
export default MagazineArchive;

‎astro/src/components/parentfile.jsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
1-
import React, { useState } from "react";
2-
import MagazineArchive from "./Searchbar"; // Assuming this is your search bar component
1+
import React, { useState, useEffect } from "react";
2+
import MagazineArchive from "./Searchbar"; // Search bar component
33
import ContentGrid from "./ContentGrid";
44

55
function MagazineApp() {
6-
const [selectedYear, setSelectedYear] = useState(null);
7-
8-
// console.log('Selected Year:', selectedYear); // Check if the selected year is logged
9-
10-
return (
11-
<div className="bg-gray-900 min-h-screen">
12-
<MagazineArchive onYearSelect={setSelectedYear} />
13-
14-
{/* Content Grid Component */}
15-
{selectedYear && <ContentGrid selectedYear={selectedYear} />}
16-
</div>
17-
);
18-
}
19-
6+
const [selectedYear, setSelectedYear] = useState(null);
7+
const [loading, setLoading] = useState(true); // State for loader
8+
9+
// Simulate API or content loading
10+
useEffect(() => {
11+
setTimeout(() => setLoading(false), 1500); // Simulate loading for 1.5s
12+
}, []);
13+
14+
return (
15+
<div className="bg-gray-900 min-h-screen">
16+
{/* Show loader while loading */}
17+
{loading ? (
18+
<div className="fixed inset-0 flex items-center justify-center bg-gray-900 z-50">
19+
<div className="w-12 h-12 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
20+
</div>
21+
) : (
22+
<>
23+
<MagazineArchive onYearSelect={setSelectedYear} />
24+
{/* Show ContentGrid only when a year is selected */}
25+
{selectedYear && <ContentGrid selectedYear={selectedYear} />}
26+
</>
27+
)}
28+
</div>
29+
);
30+
}
2031

2132
export default MagazineApp;

0 commit comments

Comments
 (0)