Skip to content
This repository was archived by the owner on Aug 4, 2023. It is now read-only.

Commit 4d0d62a

Browse files
ShivaBhattacharjeeShivaBhattacharjee
authored
Merge pull request #42 from ShivaBhattacharjee/upcomingcard
added upcoming season card
2 parents 33ccbc1 + 86921d3 commit 4d0d62a

File tree

3 files changed

+70
-86
lines changed

3 files changed

+70
-86
lines changed

‎src/Components/UpcomingSeason.jsx‎

Lines changed: 13 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
33
import { HomeApi } from './constants';
44
import { useFetchInitialData } from "../utils/hooks";
55
import { LazyLoadImage } from 'react-lazy-load-image-component';
6+
import UpcomingSeasonCard from './UpcomingSeasonCard';
67
const UpcomingSeason = () => {
78
const [summer, setSummer] = useState([])
89
const [fall, setFall] = useState([]);
@@ -35,7 +36,7 @@ const UpcomingSeason = () => {
3536
getWinter();
3637
}, []);
3738

38-
useFetchInitialData(summer,winter,fall,spring)
39+
useFetchInitialData(summer, winter, fall, spring)
3940
return (
4041
<div className='upcoming-season'>
4142
<div className="airing-schedule-heading">
@@ -49,24 +50,9 @@ const UpcomingSeason = () => {
4950
{fall?.map((fallData) => {
5051
return (
5152
<>
52-
<div className="content">
53-
<Link to={`/anime-details/${fallData?.id}`}>
54-
<LazyLoadImage src={fallData?.image} alt="img" />
55-
</Link>
56-
<div className="text">
57-
<h4>{fallData?.title?.userPreferred}</h4>
58-
<div className="details-seasons">
59-
<span>{fallData.type}</span>
60-
<span>{fallData.countryOfOrigin}</span>
61-
</div>
62-
<span>{fallData?.releaseDate}</span>
63-
<div className="genre-upcoming">
64-
{fallData?.genres?.map((genrData) => (
65-
<small>{genrData} </small>
66-
))}
67-
</div>
68-
</div>
69-
</div>
53+
<UpcomingSeasonCard
54+
fallData={fallData}
55+
/>
7056
</>
7157
)
7258
})}
@@ -79,24 +65,8 @@ const UpcomingSeason = () => {
7965
{summer?.map((fallData) => {
8066
return (
8167
<>
82-
<div className="content">
83-
<Link to={`/anime-details/${fallData?.id}`}>
84-
<LazyLoadImage src={fallData?.image} alt="img" loading='lazy'/>
85-
</Link>
86-
<div className="text">
87-
<h4>{fallData?.title?.userPreferred}</h4>
88-
<div className="details-seasons">
89-
<span>{fallData.type}</span>
90-
<span>{fallData.countryOfOrigin}</span>
91-
</div>
92-
<span>{fallData?.releaseDate}</span>
93-
<div className="genre-upcoming">
94-
{fallData?.genres?.map((genrData) => (
95-
<small>{genrData} </small>
96-
))}
97-
</div>
98-
</div>
99-
</div>
68+
<UpcomingSeasonCard
69+
fallData={fallData} />
10070
</>
10171
)
10272
})}
@@ -106,27 +76,12 @@ const UpcomingSeason = () => {
10676

10777
<div className="season-box">
10878
<h2>Winter</h2>
109-
{winter?.map((winterData) => {
79+
{winter?.map((fallData) => {
11080
return (
11181
<>
112-
<div className="content">
113-
<Link to={`/anime-details/${winterData.id}`}>
114-
<LazyLoadImage src={winterData.image} alt="img" loading='lazy' />
115-
</Link>
116-
<div className="text">
117-
<h4>{winterData?.title?.userPreferred}</h4>
118-
<div className="details-seasons">
119-
<span>{winterData.type}</span>
120-
<span>{winterData.countryOfOrigin}</span>
121-
</div>
122-
<span>{winterData?.releaseDate}</span>
123-
<div className="genre-upcoming">
124-
{winterData?.genres?.map((winterData) => (
125-
<small>{winterData} </small>
126-
))}
127-
</div>
128-
</div>
129-
</div>
82+
<UpcomingSeasonCard
83+
fallData={fallData}
84+
/>
13085
</>
13186
)
13287
})}
@@ -136,27 +91,10 @@ const UpcomingSeason = () => {
13691

13792
<div className="season-box">
13893
<h2>Spring</h2>
139-
{spring?.map((sprinData) => {
94+
{spring?.map((fallData) => {
14095
return (
14196
<>
142-
<div className="content">
143-
<Link to={`/anime-details/${sprinData.id}`}>
144-
<LazyLoadImage src={sprinData.image} alt="img" />
145-
</Link>
146-
<div className="text">
147-
<h4>{sprinData?.title?.userPreferred}</h4>
148-
<div className="details-seasons">
149-
<span>{sprinData.type}</span>
150-
<span>{sprinData.countryOfOrigin}</span>
151-
</div>
152-
<span>{sprinData?.releaseDate}</span>
153-
<div className="genre-upcoming">
154-
{sprinData?.genres?.map((genrData) => (
155-
<small>{genrData} </small>
156-
))}
157-
</div>
158-
</div>
159-
</div>
97+
<UpcomingSeasonCard fallData={fallData}/>
16098
</>
16199
)
162100
})}

‎src/Components/UpcomingSeasonCard.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { LazyLoadImage } from 'react-lazy-load-image-component';
3+
import { Link } from "react-router-dom";
4+
const UpcomingSeasonCard = ({fallData}) => {
5+
return (
6+
<div className="content">
7+
<Link to={`/anime-details/${fallData?.id}`}>
8+
<LazyLoadImage src={fallData?.image} alt="img" />
9+
</Link>
10+
<div className="text">
11+
<h4>{fallData?.title?.userPreferred}</h4>
12+
<div className="details-seasons">
13+
<span>{fallData.type}</span>
14+
<span>{fallData.countryOfOrigin}</span>
15+
</div>
16+
<span>{fallData?.releaseDate}</span>
17+
<div className="genre-upcoming">
18+
{fallData?.genres?.map((genrData) => (
19+
<small>{genrData} </small>
20+
))}
21+
</div>
22+
</div>
23+
</div>
24+
)
25+
}
26+
27+
export default UpcomingSeasonCard

‎src/css/navbar.css‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
margin: 15px 19px;
192192
}
193193
}
194-
@media(max-width:1350px){
194+
@media(max-width:1360px){
195195
.account-login{
196196
position: relative;
197197
right: 5%;
@@ -326,21 +326,25 @@
326326
font-size: 35px;
327327
left: 130px;
328328
}
329+
.account-login{
330+
position: relative;
331+
left: 22%;
332+
}
329333
}
330334
@media only screen and (max-width: 650px) {
331335
.account-login{
332336
position: relative;
333-
left: 19%;
337+
left: 20%;
334338
}
335339
.login-tab ion-icon{
336340
font-size: 35px;
337-
left: 110px;
341+
left: 21%;
338342
}
339343
}
340-
@media only screen and (max-width: 600px) {
344+
@media only screen and (max-width: 610px) {
341345
.account-login{
342346
position: relative;
343-
left: 17%;
347+
left: 18%;
344348
}
345349
.login-tab ion-icon{
346350
font-size: 35px;
@@ -379,25 +383,40 @@
379383
font-size: 30px;
380384
}
381385
}
382-
@media(max-width:440px){
386+
@media(max-width:450px){
383387
.account-login{
384388
position: relative;
385-
left: 5%;
389+
left: 9%;
386390
}
387391
.login-tab ion-icon{
388392
left: 6px;
389393
}
390394
}
391-
@media(max-width:400px){
395+
@media(max-width:410px){
392396
.account-login{
393-
left: 2%;
397+
left: 4%;
394398
}
395399
}
396-
@media(max-width:355px){
400+
@media(max-width:385px){
397401
.account-login{
398-
left: 0%;
402+
left: 9%;
399403
}
400404
.logo>a{
401405
font-size: 20px;
402406
}
407+
}
408+
@media(max-width:360px){
409+
.account-login{
410+
left:4%;
411+
}
412+
}
413+
@media(max-width:340px){
414+
.account-login{
415+
left:2%;
416+
}
417+
}
418+
@media(max-width:308px){
419+
.account-login{
420+
left:-2%;
421+
}
403422
}

0 commit comments

Comments
 (0)