|
|
|
|
@ -3,19 +3,48 @@ import searchIcon from "../../assets/img/Group 1148.svg"; |
|
|
|
|
import moment from "jalali-moment"; |
|
|
|
|
import { useState } from 'react'; |
|
|
|
|
import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; |
|
|
|
|
import logoIcon from '../../assets/img/logo.png'; |
|
|
|
|
|
|
|
|
|
import { connect } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Header=()=>{ |
|
|
|
|
|
|
|
|
|
const Header = ({ |
|
|
|
|
isMobile |
|
|
|
|
}) => { |
|
|
|
|
let today = moment().locale("fa").format("YYYY/M/D"); |
|
|
|
|
console.log("today:"); |
|
|
|
|
console.log(today); |
|
|
|
|
let weekday = new Date().getDay(); |
|
|
|
|
let weekdayList=["یکشنبه","دوشنبه","سهشنبه","چهارشنبه",'پنجشنبه','جمعه',"شنبه"]; |
|
|
|
|
let weekdayList = ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه", 'پنجشنبه', 'جمعه', "شنبه"]; |
|
|
|
|
console.log("weekday:"); |
|
|
|
|
console.log(weekday); |
|
|
|
|
return ( |
|
|
|
|
<div className="header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center shadow-md "> |
|
|
|
|
<div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'} `}> |
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
isMobile ? |
|
|
|
|
<div className='flex w-full items-center justify-between rtl px-4'> |
|
|
|
|
<div> |
|
|
|
|
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M3 5H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" /> |
|
|
|
|
<path d="M3 10H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" /> |
|
|
|
|
<path d="M3 15H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" /> |
|
|
|
|
<path d="M3 20H21" stroke="#df1452" stroke-width="1.5" stroke-linecap="round" /> |
|
|
|
|
</svg> |
|
|
|
|
</div> |
|
|
|
|
<img src={logoIcon} className="h-10"/> |
|
|
|
|
<div> |
|
|
|
|
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
|
|
<path d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" stroke="#df1452" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
|
|
<path d="M15.4955 12H15.5045" stroke="#df1452" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
|
|
<path d="M8.49451 12H8.50349" stroke="#df1452" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
|
|
|
|
</svg> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> : |
|
|
|
|
<> |
|
|
|
|
<div className="header-profile h-full flex items-center"> |
|
|
|
|
<div className="header-profile-img-container w-10 h-10 bg-color2 rounded-full ml-6 overflow-hidden"> |
|
|
|
|
<img src={avatar1} alt="avatar1" className='w-full' /> |
|
|
|
|
@ -31,13 +60,8 @@ const Header=()=>{ |
|
|
|
|
</div> |
|
|
|
|
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div> |
|
|
|
|
<div className="header-date-and-time text-right ml-6"> |
|
|
|
|
{/* <div className="header-date-and-time-time text-color2 text-sm"> |
|
|
|
|
<span className="header-date-and-time-number text-color3 ml-2"> |
|
|
|
|
ساعت |
|
|
|
|
</span> |
|
|
|
|
11:11:11 |
|
|
|
|
</div> */} |
|
|
|
|
<Clock/> |
|
|
|
|
|
|
|
|
|
<Clock /> |
|
|
|
|
<div className="header-date-and-date text-sm"> |
|
|
|
|
<span className="header-date-and-date-text1 text-color3 ml-2"> |
|
|
|
|
{weekdayList[weekday]} |
|
|
|
|
@ -54,6 +78,9 @@ const Header=()=>{ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
{/* <div className="header-search w-[51.5%] h-full ml-6 flex items-center"> |
|
|
|
|
<img src={searchIcon} alt="searchIcon" className="header-search-icon" /> |
|
|
|
|
<input |
|
|
|
|
@ -67,12 +94,17 @@ const Header=()=>{ |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
}); |
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default Header; |
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Clock=()=>{ |
|
|
|
|
const Clock = () => { |
|
|
|
|
let today = new Date(); |
|
|
|
|
let h = today.getHours(); |
|
|
|
|
let m = today.getMinutes(); |
|
|
|
|
@ -80,11 +112,11 @@ const Clock=()=>{ |
|
|
|
|
// const [h,setH]=useState(today.getHours());
|
|
|
|
|
// const [m, setM] = useState(today.getMinutes());
|
|
|
|
|
// const [s, setS] = useState(today.getSeconds());
|
|
|
|
|
const [counter,setCounter] = useState(0);
|
|
|
|
|
const [counter, setCounter] = useState(0); |
|
|
|
|
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
setCounter(counter+1); |
|
|
|
|
},1000); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
setCounter(counter + 1); |
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
|
