Skip to content

Commit 4fc29ef

Browse files
land-bitlandbit
land-bit
and
landbit
authored
feat: add style for Homepage and responsive design (kaliacad#187)
Close kaliacad#27 kaliacad#40 kaliacad#142 kaliacad#174 kaliacad#179 --------- Co-authored-by: landbit <landbit@debian.landry.com>
1 parent 2594f52 commit 4fc29ef

File tree

8 files changed

+123
-206
lines changed

8 files changed

+123
-206
lines changed

‎src/App.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import TopVisited from './components/TopVisited.jsx';
22
function App() {
33
return (
4-
<div className='container mx-auto py-4'>
5-
<TopVisited />
4+
<div>
5+
<div className='container mx-auto py-4 mb-8'>
6+
<TopVisited />
7+
</div>
68
</div>
79
);
810
}

‎src/components/ArticleForm.jsx‎

Lines changed: 0 additions & 147 deletions
This file was deleted.

‎src/components/ArticleForm/ArticleForm.jsx‎

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { useState } from 'react';
1+
import { useState, useEffect } from 'react';
22
import PropTypes from 'prop-types';
3-
import CountryPicker from './CountryPicker';
4-
import DatePicker from './DatePicker';
5-
import AccessPicker from './AccessPicker';
3+
import CountryPickList from './CountryPicker';
4+
import axios from 'axios';
65

76
const ArticleForm = ({ onSubmit, loading }) => {
87
const [formErrors, setFormErrors] = useState({});
@@ -11,7 +10,43 @@ const ArticleForm = ({ onSubmit, loading }) => {
1110
date: '',
1211
access: 'all-access',
1312
});
13+
const [locationError, setLocationError] = useState('');
1414

15+
useEffect(() => {
16+
const fetchLocation = async (lat, lon) => {
17+
try {
18+
const response = await axios.get('https://api.bigdatacloud.net/data/reverse-geocode-client', {
19+
params: {
20+
latitude: lat,
21+
longitude: lon,
22+
localityLanguage: 'en',
23+
},
24+
});
25+
26+
const { countryCode } = response.data;
27+
setForm((prevForm) => ({
28+
...prevForm,
29+
country: countryCode,
30+
}));
31+
} catch (error) {
32+
setLocationError('Error fetching location data.');
33+
}
34+
};
35+
36+
if (navigator.geolocation) {
37+
navigator.geolocation.getCurrentPosition(
38+
(position) => {
39+
const { latitude, longitude } = position.coords;
40+
fetchLocation(latitude, longitude);
41+
},
42+
() => {
43+
setLocationError('Error getting geolocation.');
44+
},
45+
);
46+
} else {
47+
setLocationError('Geolocation is not supported by this browser.');
48+
}
49+
}, []);
1550
const [country, setCountry] = useState('CD');
1651
const [continent, setContinent] = useState('Africa');
1752

@@ -44,16 +79,17 @@ const ArticleForm = ({ onSubmit, loading }) => {
4479
}
4580
};
4681

82+
// const countryData = Object.keys(country.all);
83+
4784
return (
48-
<form onSubmit={handleSubmit} className='w-full flex flex-col items-center'>
49-
<div className='flex flex-col gap-[0.5rem] justify-between items-center w-full py-3'>
50-
<div className='text-start mb-2'>
51-
<span className='date text-[20px] '>Veuillez remplir le formulaire pour obtenir les articles souhaités</span>
85+
<form onSubmit={handleSubmit} className='w-full formBorder py-5 rounded-xl max-md:w-[95vw]'>
86+
<div className='flex flex-col gap-[0.5rem] justify-between items-center w-full'>
87+
<div className='text-start mb-2 py-5'>
88+
<p className='date text-[20px] max-md:text-xs text-center'>Veuillez remplir le formulaire pour obtenir les articles souhaités</p>
5289
</div>
5390

54-
<div className='inputs flex gap-[1rem] items-start'>
55-
<CountryPicker
56-
label={'Choisir un pays'}
91+
<div className='inputs flex gap-[1rem] max-md:flex-col max-md:text-xs'>
92+
<CountryPickList
5793
country={country}
5894
onChangeCountry={(country) => {
5995
setForm({ ...form, country });
@@ -64,16 +100,35 @@ const ArticleForm = ({ onSubmit, loading }) => {
64100
onChangeContinent={(continent) => setContinent(continent)}
65101
defaultContinent='Africa'
66102
/>
103+
<div className='select_container country_select'>
104+
<div>
105+
<label className='select_label'>Date</label>
67106

68-
<DatePicker label={'Date'} date={form.date} onChange={handleChange} error={formErrors.date} />
107+
<input id='fullDate' type='date' name='date' className='select_options' value={form.date} onChange={handleChange} />
108+
</div>
109+
{formErrors.date && <div className='text-red-500'>{formErrors.date}</div>}
110+
</div>
69111

70-
<AccessPicker label={'Plateforme'} access={form.access} onChange={handleChange} error={formErrors.access} />
112+
<div className='select_container country_select'>
113+
<div>
114+
<label htmlFor='' className='select_label'>
115+
Platform
116+
</label>
117+
<select className='select_options' name='access' value={form.access} onChange={handleChange}>
118+
<option value='all-access'>all-access</option>
119+
<option value='desktop'>desktop</option>
120+
<option value='mobile-app'>mobile-app</option>
121+
<option value='mobile-web'>mobile-web</option>
122+
</select>
123+
{formErrors.access && <div className='error'>{formErrors.access}</div>}
124+
</div>
125+
</div>
71126
</div>
72-
73-
<button type='submit' className='py-[0.5rem] bg-green-500 text-white px-6 text-[18px] capitalize font-600 w-56'>
74-
{loading ? 'Submitting' : 'Envoyer'}
127+
<button type='submit' className=' py-[0.7rem] my-5 bg-green-500 text-white px-6 text-[18px] font-600 w-56 max-md:text-xs'>
128+
{loading ? 'Envoie en cours...' : 'Envoyer'}
75129
</button>
76130
</div>
131+
{locationError && <div className='error'>{locationError}</div>}
77132
</form>
78133
);
79134
};

‎src/components/ArticleForm/CountryPicker.jsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
33
import countries from '../../helpers/countriesIsoCodes';
44
import { Menu } from '../Menu';
55

6-
export default function CountryPickList({ label, country, onChangeCountry, defaultCountry, continent, onChangeContinent, defaultContinent }) {
6+
export default function CountryPickList({ country, onChangeCountry, defaultCountry, continent, onChangeContinent, defaultContinent }) {
77
const countryRef = useRef(null);
88

99
// Set the default country when the Component is mounted
@@ -27,28 +27,25 @@ export default function CountryPickList({ label, country, onChangeCountry, defau
2727
};
2828

2929
return (
30-
<div className='country_select'>
31-
<p className='label'>{label}</p>
32-
<div className='select_options'>
33-
<Menu
34-
label='Continent'
35-
className='continent'
36-
data={Object.keys(countries).map((el) => ({ value: el, label: el }))}
37-
value={continent}
38-
onChange={handleChangeContinent}
39-
defaultValue={defaultContinent}
40-
/>
30+
<div className='country_select flex max-md:flex-col'>
31+
<Menu
32+
label='Continent'
33+
className='continent'
34+
data={Object.keys(countries).map((el) => ({ value: el, label: el }))}
35+
value={continent}
36+
onChange={handleChangeContinent}
37+
defaultValue={defaultContinent}
38+
/>
4139

42-
<Menu
43-
label='Pays'
44-
className='country'
45-
data={countries[continent ?? defaultContinent].map((el) => ({ value: el.code, label: el.name }))}
46-
value={country}
47-
onChange={handleChangeCountry}
48-
defaultValue={defaultCountry}
49-
ref={countryRef}
50-
/>
51-
</div>
40+
<Menu
41+
label='Pays'
42+
className='country'
43+
data={countries[continent ?? defaultContinent].map((el) => ({ value: el.code, label: el.name }))}
44+
value={country}
45+
onChange={handleChangeCountry}
46+
defaultValue={defaultCountry}
47+
ref={countryRef}
48+
/>
5249
</div>
5350
);
5451
}

‎src/components/NavBar.jsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react';
22
import '../NavBar.css'; // Nous allons ajouter des styles pour la transition
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4-
import { faBook, faBug, faCode, faComment, faCopyright, faUsers } from '@fortawesome/free-solid-svg-icons';
4+
import { faArrowsUpToLine, faBook, faBug, faCode, faComment, faCopyright, faPager, faUsers } from '@fortawesome/free-solid-svg-icons';
55

66
const NavBar = () => {
77
const [helpMenuOpen, setHelpMenuOpen] = useState(false);
@@ -14,20 +14,26 @@ const NavBar = () => {
1414
<nav className='flex items-center justify-between bg-blue-800 h-16 px-6 py-2'>
1515
<a href='/'>
1616
<div className='text-white text-xl font-bold'>
17-
Emi - <span className=' font-light'>articles les plus visités par pays</span>
17+
Emi <span className=' font-light max-md:hidden'>- articles les plus visités par pays</span>
1818
</div>
1919
</a>
2020

2121
<div className='flex items-center justify-between'>
2222
<ul className='flex items-center justify-center gap-4 text-white'>
2323
<li>
2424
<a href='/page-views' className=' text-white underline'>
25-
Page views
25+
<span className='max-md:hidden'>Page views</span>
26+
<span className='hidden max-md:block'>
27+
<FontAwesomeIcon icon={faPager} style={{ color: '#ffffff' }} />
28+
</span>
2629
</a>
2730
</li>
2831
<li>
2932
<a href='/top-africa' className=' text-white underline'>
30-
Top Africa
33+
<span className='max-md:hidden'>Top Africa</span>
34+
<span className='hidden max-md:block'>
35+
<FontAwesomeIcon icon={faArrowsUpToLine} style={{ color: '#ffffff' }} />
36+
</span>
3137
</a>
3238
</li>
3339
</ul>

0 commit comments

Comments
 (0)