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

Commit

Permalink
Merge pull request #42 from ShivaBhattacharjee/upcomingcard
Browse files Browse the repository at this point in the history 
added upcoming season card
  • Loading branch information
@ShivaBhattacharjee
ShivaBhattacharjee authored May 22, 2023
2 parents 33ccbc1 + 86921d3 commit 4d0d62a
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 86 deletions.
88 changes: 13 additions & 75 deletions src/Components/UpcomingSeason.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
import { HomeApi } from './constants';
import { useFetchInitialData } from "../utils/hooks";
import { LazyLoadImage } from 'react-lazy-load-image-component';
import UpcomingSeasonCard from './UpcomingSeasonCard';
const UpcomingSeason = () => {
const [summer, setSummer] = useState([])
const [fall, setFall] = useState([]);
Expand Down Expand Up @@ -35,7 +36,7 @@ const UpcomingSeason = () => {
getWinter();
}, []);

useFetchInitialData(summer,winter,fall,spring)
useFetchInitialData(summer, winter, fall, spring)
return (
<div className='upcoming-season'>
<div className="airing-schedule-heading">
Expand All @@ -49,24 +50,9 @@ const UpcomingSeason = () => {
{fall?.map((fallData) => {
return (
<>
<div className="content">
<Link to={`/anime-details/${fallData?.id}`}>
<LazyLoadImage src={fallData?.image} alt="img" />
</Link>
<div className="text">
<h4>{fallData?.title?.userPreferred}</h4>
<div className="details-seasons">
<span>{fallData.type}</span>
<span>{fallData.countryOfOrigin}</span>
</div>
<span>{fallData?.releaseDate}</span>
<div className="genre-upcoming">
{fallData?.genres?.map((genrData) => (
<small>{genrData} </small>
))}
</div>
</div>
</div>
<UpcomingSeasonCard
fallData={fallData}
/>
</>
)
})}
Expand All @@ -79,24 +65,8 @@ const UpcomingSeason = () => {
{summer?.map((fallData) => {
return (
<>
<div className="content">
<Link to={`/anime-details/${fallData?.id}`}>
<LazyLoadImage src={fallData?.image} alt="img" loading='lazy'/>
</Link>
<div className="text">
<h4>{fallData?.title?.userPreferred}</h4>
<div className="details-seasons">
<span>{fallData.type}</span>
<span>{fallData.countryOfOrigin}</span>
</div>
<span>{fallData?.releaseDate}</span>
<div className="genre-upcoming">
{fallData?.genres?.map((genrData) => (
<small>{genrData} </small>
))}
</div>
</div>
</div>
<UpcomingSeasonCard
fallData={fallData} />
</>
)
})}
Expand All @@ -106,27 +76,12 @@ const UpcomingSeason = () => {

<div className="season-box">
<h2>Winter</h2>
{winter?.map((winterData) => {
{winter?.map((fallData) => {
return (
<>
<div className="content">
<Link to={`/anime-details/${winterData.id}`}>
<LazyLoadImage src={winterData.image} alt="img" loading='lazy' />
</Link>
<div className="text">
<h4>{winterData?.title?.userPreferred}</h4>
<div className="details-seasons">
<span>{winterData.type}</span>
<span>{winterData.countryOfOrigin}</span>
</div>
<span>{winterData?.releaseDate}</span>
<div className="genre-upcoming">
{winterData?.genres?.map((winterData) => (
<small>{winterData} </small>
))}
</div>
</div>
</div>
<UpcomingSeasonCard
fallData={fallData}
/>
</>
)
})}
Expand All @@ -136,27 +91,10 @@ const UpcomingSeason = () => {

<div className="season-box">
<h2>Spring</h2>
{spring?.map((sprinData) => {
{spring?.map((fallData) => {
return (
<>
<div className="content">
<Link to={`/anime-details/${sprinData.id}`}>
<LazyLoadImage src={sprinData.image} alt="img" />
</Link>
<div className="text">
<h4>{sprinData?.title?.userPreferred}</h4>
<div className="details-seasons">
<span>{sprinData.type}</span>
<span>{sprinData.countryOfOrigin}</span>
</div>
<span>{sprinData?.releaseDate}</span>
<div className="genre-upcoming">
{sprinData?.genres?.map((genrData) => (
<small>{genrData} </small>
))}
</div>
</div>
</div>
<UpcomingSeasonCard fallData={fallData}/>
</>
)
})}
Expand Down
27 changes: 27 additions & 0 deletions src/Components/UpcomingSeasonCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { Link } from "react-router-dom";
const UpcomingSeasonCard = ({fallData}) => {
return (
<div className="content">
<Link to={`/anime-details/${fallData?.id}`}>
<LazyLoadImage src={fallData?.image} alt="img" />
</Link>
<div className="text">
<h4>{fallData?.title?.userPreferred}</h4>
<div className="details-seasons">
<span>{fallData.type}</span>
<span>{fallData.countryOfOrigin}</span>
</div>
<span>{fallData?.releaseDate}</span>
<div className="genre-upcoming">
{fallData?.genres?.map((genrData) => (
<small>{genrData} </small>
))}
</div>
</div>
</div>
)
}

export default UpcomingSeasonCard
41 changes: 30 additions & 11 deletions src/css/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
margin: 15px 19px;
}
}
@media(max-width:1350px){
@media(max-width:1360px){
.account-login{
position: relative;
right: 5%;
Expand Down Expand Up @@ -326,21 +326,25 @@
font-size: 35px;
left: 130px;
}
.account-login{
position: relative;
left: 22%;
}
}
@media only screen and (max-width: 650px) {
.account-login{
position: relative;
left: 19%;
left: 20%;
}
.login-tab ion-icon{
font-size: 35px;
left: 110px;
left: 21%;
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 610px) {
.account-login{
position: relative;
left: 17%;
left: 18%;
}
.login-tab ion-icon{
font-size: 35px;
Expand Down Expand Up @@ -379,25 +383,40 @@
font-size: 30px;
}
}
@media(max-width:440px){
@media(max-width:450px){
.account-login{
position: relative;
left: 5%;
left: 9%;
}
.login-tab ion-icon{
left: 6px;
}
}
@media(max-width:400px){
@media(max-width:410px){
.account-login{
left: 2%;
left: 4%;
}
}
@media(max-width:355px){
@media(max-width:385px){
.account-login{
left: 0%;
left: 9%;
}
.logo>a{
font-size: 20px;
}
}
@media(max-width:360px){
.account-login{
left:4%;
}
}
@media(max-width:340px){
.account-login{
left:2%;
}
}
@media(max-width:308px){
.account-login{
left:-2%;
}
}

1 comment on commit 4d0d62a

@vercel
Copy link

@vercel vercel bot commented on 4d0d62a May 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

animetrix – ./

animetrix.vercel.app
animetrix-shivabhattacharjee.vercel.app
animetrix-git-main-shivabhattacharjee.vercel.app

Please sign in to comment.