Skip to content

Commit 938a44f

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
enhance formatting of global components
1 parent e706d96 commit 938a44f

File tree

6 files changed

+82
-83
lines changed

6 files changed

+82
-83
lines changed

‎src/Components/GlobalComponents/Header.jsx

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
1-
import logo from '../../assets/images/logo.svg'
2-
import StartPageNav from './NavBar'
1+
import logo from '../../assets/images/logo.svg';
2+
import StartPageNav from './NavBar';
33
import { ToastContainer } from 'react-toastify';
4-
import 'react-toastify/dist/ReactToastify.css';
5-
4+
import 'react-toastify/dist/ReactToastify.css';
65

76
function Header() {
8-
97
return (
10-
<div className=' py-7 bg-white border-b-[1.5px] border-b-[rgba(227, 227, 227, 1)] border-solid'>
11-
<div className='container flex justify-between items-center'>
12-
<h1 className='flex text-3xl gap-5 font-bold items-center'><img src={logo} className='w-[54px]'/> CodeLink</h1>
13-
<StartPageNav/>
14-
15-
</div>
16-
<ToastContainer
17-
position="top-left"
18-
autoClose={2000}
19-
hideProgressBar={false}
20-
newestOnTop={false}
21-
closeOnClick
22-
rtl={false}
23-
pauseOnFocusLoss
24-
draggable
25-
pauseOnHover
26-
theme="light"
27-
/>
8+
<div className='py-7 bg-white border-b-[1.5px] border-b-[rgba(227, 227, 227, 1)] border-solid'>
9+
<div className='container flex justify-between items-center'>
10+
<h1 className='flex text-3xl gap-5 font-bold items-center'>
11+
<img src={logo} className='w-[54px]' alt='CodeLink Logo' /> CodeLink
12+
</h1>
13+
<StartPageNav />
14+
</div>
15+
<ToastContainer
16+
position="top-left"
17+
autoClose={2000}
18+
hideProgressBar={false}
19+
newestOnTop={false}
20+
closeOnClick
21+
rtl={false}
22+
pauseOnFocusLoss
23+
draggable
24+
pauseOnHover
25+
theme="light"
26+
/>
2827
</div>
29-
)
28+
);
3029
}
3130

32-
export default Header
31+
export default Header;

‎src/Components/GlobalComponents/LandingScreen.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import landingimage from '../../assets/images/global/Team spirit-cuate 1.svg'
2-
function LandingScreen({title}) {
1+
import landingimage from '../../assets/images/global/Team spirit-cuate 1.svg';
2+
3+
function LandingScreen({ title }) {
34
return (
4-
<div className="w-full h-full element-center center-element shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)] flex-col border-[rgba(209,208,208,1)]">
5-
<h4 className='font-semibold text-4xl'>{title}</h4>
6-
<h3 className='text-xl font-semibold'>We are happy to have you with us and wish you a happy trip</h3>
7-
<img src={landingimage} alt='landing' />
5+
<div className="w-full h-full flex flex-col items-center justify-center shadow-[1px_1px_4px_0px_rgba(0,0,0,0.25)] border-[rgba(209,208,208,1)]">
6+
<h4 className="font-semibold text-4xl">{title}</h4>
7+
<h3 className="text-xl font-semibold">We are happy to have you with us and wish you a happy trip</h3>
8+
<img src={landingimage} alt="landing" />
89
</div>
9-
10-
)
10+
);
1111
}
1212

13-
export default LandingScreen
13+
export default LandingScreen;

‎src/Components/GlobalComponents/NavBar.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useEffect } from "react";
2-
import { useSelector, useDispatch } from "react-redux";
3-
import { NavLink } from "react-router-dom";
4-
import { setSavedUser } from "../../store/user/userSlice";
1+
import { useEffect } from 'react';
2+
import { useSelector, useDispatch } from 'react-redux';
3+
import { NavLink } from 'react-router-dom';
4+
import { setSavedUser } from '../../store/user/userSlice';
55

66
function StartPageNav() {
77
const userData = useSelector((state) => state.auth);
@@ -61,4 +61,4 @@ function StartPageNav() {
6161
);
6262
}
6363

64-
export default StartPageNav;
64+
export default StartPageNav;

‎src/Components/GlobalComponents/SearchField.jsx

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
1-
/* eslint-disable react/prop-types */
2-
import searchIcon from '../../assets/images/global/searchIcon.svg'
1+
import PropTypes from 'prop-types';
2+
import searchIcon from '../../assets/images/global/searchIcon.svg';
33

4-
function SearchField({setKeyWord,getSearch,setCurrent,type}) {
5-
6-
7-
const changeHandler=async(e)=>{
4+
function SearchField({ setKeyWord, getSearch, setCurrent, type }) {
5+
const changeHandler = async (e) => {
86
setKeyWord(e.target.value);
9-
const resData=await getSearch();
10-
if(resData.ok && type=='users'){
11-
setCurrent(resData.data.users)
12-
}
13-
else if(resData.ok && type=='teams'){
14-
setCurrent(resData.data.teams)
7+
const resData = await getSearch();
8+
if (resData.ok) {
9+
if (type === 'users') {
10+
setCurrent(resData.data.users);
11+
} else if (type === 'teams') {
12+
setCurrent(resData.data.teams);
13+
}
1514
}
15+
};
1616

17-
18-
19-
20-
}
2117
return (
22-
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] ">
18+
<div className="relative w-full bg-white rounded-2xl shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)]">
2319
<input
2420
onChange={changeHandler}
2521
type="text"
2622
placeholder="Search..."
27-
className=" py-4 pl-10 pr-8 border w-full rounded-2xl outline-none border-none focus:outline-none focus:ring focus:border-blue-500"
23+
className="py-4 pl-10 pr-8 border w-full rounded-2xl outline-none border-none focus:outline-none focus:ring focus:border-blue-500"
2824
/>
2925
<div className="absolute inset-y-0 left-0 flex items-center pl-2">
30-
<img src={searchIcon} />
26+
<img src={searchIcon} alt="Search Icon" />
3127
</div>
3228
</div>
33-
)
29+
);
3430
}
3531

36-
export default SearchField
32+
SearchField.propTypes = {
33+
setKeyWord: PropTypes.func.isRequired,
34+
getSearch: PropTypes.func.isRequired,
35+
setCurrent: PropTypes.func.isRequired,
36+
type: PropTypes.string.isRequired,
37+
};
38+
39+
export default SearchField;

‎src/Components/GlobalComponents/UploadImage.jsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
/* eslint-disable react/prop-types */
1+
import { useRef } from 'react';
22

3-
import { useEffect, useRef } from "react";
3+
function UploadImage({ uploadIcon, value, setFormData, formData, setUploadFromDevice }) {
4+
const imageRef = useRef();
45

5-
function UploadImage({uploadIcon,value,setFormData,formData,setUploadFromDevice}) {
6-
const imageRef=useRef()
7-
const imageChange = (e) => {
6+
const imageChange = (e) => {
87
if (e.target.files && e.target.files.length > 0) {
9-
setFormData({...formData,[value]:e.target.files[0]})
10-
setUploadFromDevice(true)
8+
setFormData({ ...formData, [value]: e.target.files[0] });
9+
setUploadFromDevice(true);
1110
}
1211
};
1312

1413
return (
1514
<div className='flex'>
1615
<label htmlFor='file-input' className='cursor-pointer'>
17-
<img src={uploadIcon}/>
18-
</label>
19-
<input id="file-input" className='hidden' type="file" ref={imageRef} onChange={imageChange}/>
20-
21-
16+
<img src={uploadIcon} alt='Upload Icon' />
17+
</label>
18+
<input id='file-input' className='hidden' type='file' ref={imageRef} onChange={imageChange} />
2219
</div>
23-
)
20+
);
2421
}
2522

26-
export default UploadImage
23+
export default UploadImage;

‎src/Components/GlobalComponents/UserComponent.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable react/prop-types */
2-
function UserComponent({user}) {
2+
3+
function UserComponent({ user }) {
34
return (
4-
<div className="w-[141px] h-[141px] shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)]
5-
bg-white border-[rgba(235,235,235,1)] border-[1px] rounded-[17px] mb-2">
6-
<img src={user.userImg} className="mx-auto mt-5 mb-2 object-cover " />
7-
<h5 className="text-sm font-semibold text-center">{user.userName}</h5>
8-
<p className='text-[10px] text-center'>{user.track}</p>
9-
</div>
10-
)
5+
<div className="w-[141px] h-[141px] shadow-[0px_6px_20px_0px_rgba(218,218,218,0.3)] bg-white border-[rgba(235,235,235,1)] border-[1px] rounded-[17px] mb-2">
6+
<img src={user.userImg} alt={user.userName} className="mx-auto mt-5 mb-2 object-cover" />
7+
<h5 className="text-sm font-semibold text-center">{user.userName}</h5>
8+
<p className="text-[10px] text-center">{user.track}</p>
9+
</div>
10+
);
1111
}
1212

13-
export default UserComponent
13+
export default UserComponent;

0 commit comments

Comments
 (0)