mirror of
https://github.com/hazemKrimi/react-weather-app.git
synced 2026-05-01 18:30:25 +00:00
Add slider to home and search pages
This commit is contained in:
Hazem Krimi
+73
-9
@@ -1,7 +1,10 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { motion } from 'framer-motion';
|
||||
import Loader from '../components/Loader';
|
||||
import Card from '../components/Card';
|
||||
import LeftArrow from '../assets/left-arrow.svg';
|
||||
import RightArrow from '../assets/right-arrow.svg';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 85vh;
|
||||
@@ -13,20 +16,33 @@ const Wrapper = styled.div`
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.main, .wind, .humidity {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.slider-background {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.forecast-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 10rem));
|
||||
grid-template-columns: repeat(auto-fit, 10rem);
|
||||
grid-auto-flow: column;
|
||||
column-gap: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -100,6 +116,8 @@ const Home: React.FC = () => {
|
||||
const [ forecast, setForecast ] = useState<Forecast | null>(null);
|
||||
const [ loading, setLoading ] = useState<boolean>(true);
|
||||
const [ error, setError ] = useState<string>('');
|
||||
const [ dailyForecastGrid, setDailyForecastGrid ] = useState<number>(0);
|
||||
const [ hourlyForecastGrid, setHourlyForecastGrid ] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!navigator.geolocation) setError('Geolocation not supported in this browser! Try searching for a city instead');
|
||||
@@ -164,7 +182,21 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
<div className='daily-forecast'>
|
||||
<h2>Daily Forecast</h2>
|
||||
<div className='forecast-grid'>
|
||||
<div className='slider'>
|
||||
<motion.img
|
||||
src={LeftArrow}
|
||||
alt='Left slider arrow'
|
||||
onTap={() => {
|
||||
if (dailyForecastGrid <= forecast.daily.length / 2 - 1) setDailyForecastGrid(dailyForecastGrid + 1);
|
||||
}}
|
||||
/>
|
||||
<div className='slider-background'>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ transform: `translateX(${dailyForecastGrid * 10}rem)` }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className='forecast-grid'
|
||||
>
|
||||
{
|
||||
forecast.daily.map(day => (
|
||||
<Card
|
||||
@@ -178,11 +210,34 @@ const Home: React.FC = () => {
|
||||
/>
|
||||
))
|
||||
}
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.img
|
||||
src={RightArrow}
|
||||
alt='Right slider arrow'
|
||||
onTap={() => {
|
||||
if (dailyForecastGrid >= - forecast.daily.length / 2 + 1) setDailyForecastGrid(dailyForecastGrid - 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='hourly-forecast'>
|
||||
<h2>Hourly Forecast</h2>
|
||||
<div className='forecast-grid'>
|
||||
<div className='slider'>
|
||||
<motion.img
|
||||
src={LeftArrow}
|
||||
alt='Left slider arrow'
|
||||
onTap={() => {
|
||||
if (hourlyForecastGrid <= forecast.hourly.length / 2 - 1) setHourlyForecastGrid(hourlyForecastGrid + 1);
|
||||
}}
|
||||
/>
|
||||
<div className='slider-background'>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ transform: `translateX(${hourlyForecastGrid * 10}rem)` }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className='forecast-grid'
|
||||
>
|
||||
{
|
||||
forecast.hourly.map(hour => (
|
||||
<Card
|
||||
@@ -196,6 +251,15 @@ const Home: React.FC = () => {
|
||||
/>
|
||||
))
|
||||
}
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.img
|
||||
src={RightArrow}
|
||||
alt='Right slider arrow'
|
||||
onTap={() => {
|
||||
if (hourlyForecastGrid >= - forecast.hourly.length / 2 + 1) setHourlyForecastGrid(hourlyForecastGrid - 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='wind'>
|
||||
|
||||
+73
-3
@@ -1,8 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Loader from '../components/Loader';
|
||||
import Card from '../components/Card';
|
||||
import LeftArrow from '../assets/left-arrow.svg';
|
||||
import RightArrow from '../assets/right-arrow.svg';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 85vh;
|
||||
@@ -19,9 +22,28 @@ const Wrapper = styled.div`
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.slider-background {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.forecast-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 10rem));
|
||||
grid-template-columns: repeat(auto-fit, 10rem);
|
||||
grid-auto-flow: column;
|
||||
column-gap: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -100,6 +122,8 @@ const Search: React.FC = () => {
|
||||
const [ loading, setLoading ] = useState<boolean>(true);
|
||||
const [ error, setError ] = useState<string>('');
|
||||
const { query } = useParams<{ query: string }>();
|
||||
const [ dailyForecastGrid, setDailyForecastGrid ] = useState<number>(0);
|
||||
const [ hourlyForecastGrid, setHourlyForecastGrid ] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
@@ -157,7 +181,21 @@ const Search: React.FC = () => {
|
||||
</div>
|
||||
<div className='daily-forecast'>
|
||||
<h2>Daily Forecast</h2>
|
||||
<div className='forecast-grid'>
|
||||
<div className='slider'>
|
||||
<motion.img
|
||||
src={LeftArrow}
|
||||
alt='Left slider arrow'
|
||||
onTap={() => {
|
||||
if (dailyForecastGrid <= forecast.daily.length / 2 - 1) setDailyForecastGrid(dailyForecastGrid + 1);
|
||||
}}
|
||||
/>
|
||||
<div className='slider-background'>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ transform: `translateX(${dailyForecastGrid * 10}rem)` }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className='forecast-grid'
|
||||
>
|
||||
{
|
||||
forecast.daily.map(day => (
|
||||
<Card
|
||||
@@ -171,11 +209,34 @@ const Search: React.FC = () => {
|
||||
/>
|
||||
))
|
||||
}
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.img
|
||||
src={RightArrow}
|
||||
alt='Right slider arrow'
|
||||
onTap={() => {
|
||||
if (dailyForecastGrid >= - forecast.daily.length / 2 + 1) setDailyForecastGrid(dailyForecastGrid - 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='hourly-forecast'>
|
||||
<h2>Hourly Forecast</h2>
|
||||
<div className='forecast-grid'>
|
||||
<div className='slider'>
|
||||
<motion.img
|
||||
src={LeftArrow}
|
||||
alt='Left slider arrow'
|
||||
onTap={() => {
|
||||
if (hourlyForecastGrid <= forecast.hourly.length / 2 - 1) setHourlyForecastGrid(hourlyForecastGrid + 1);
|
||||
}}
|
||||
/>
|
||||
<div className='slider-background'>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ transform: `translateX(${hourlyForecastGrid * 10}rem)` }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className='forecast-grid'
|
||||
>
|
||||
{
|
||||
forecast.hourly.map(hour => (
|
||||
<Card
|
||||
@@ -189,6 +250,15 @@ const Search: React.FC = () => {
|
||||
/>
|
||||
))
|
||||
}
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.img
|
||||
src={RightArrow}
|
||||
alt='Right slider arrow'
|
||||
onTap={() => {
|
||||
if (hourlyForecastGrid >= - forecast.hourly.length / 2 + 1) setHourlyForecastGrid(hourlyForecastGrid - 1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='wind'>
|
||||
|
||||
Reference in New Issue
Block a user