forked from UKSOURCE/hailearning.edu.vn
68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import headerData from './header.json';
|
|
|
|
const HeaderTop = () => {
|
|
const { phone, email, location, socialLinks, languages } = headerData.top;
|
|
|
|
return (
|
|
<div className="header-top-section">
|
|
<div className="container-fluid">
|
|
<div className="header-top-wrapper">
|
|
<div className="header-left">
|
|
<ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
|
|
<li className="style-2 d-flex align-items-center me-4">
|
|
<span className="me-2">Help Line</span>
|
|
<i className="fa-solid fa-phone me-2"></i>
|
|
<a href={`tel:${phone.replace(/\s/g, '')}`}>{phone}</a>
|
|
</li>
|
|
|
|
<li className="d-flex align-items-center me-4">
|
|
<i className="fa-solid fa-location-dot me-2"></i>
|
|
{location}
|
|
</li>
|
|
|
|
<li className="d-flex align-items-center">
|
|
<i className="fa-solid fa-envelope me-2"></i>
|
|
<a href={`mailto:${email}`}>{email}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="header-right">
|
|
<div className="flag-wrap">
|
|
<div className="flag">
|
|
<i className="fa-solid fa-globe"></i>
|
|
</div>
|
|
<div className="nice-select" tabIndex={0}>
|
|
<span className="current">
|
|
{languages[0]?.name || 'English'}
|
|
</span>
|
|
<ul className="list">
|
|
{languages.map((lang, index) => (
|
|
<li
|
|
key={index}
|
|
data-value={lang.value}
|
|
className={`option ${index === 0 ? 'selected focus' : ''}`}
|
|
>
|
|
{lang.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="social-item">
|
|
{socialLinks.map((social, index) => (
|
|
<a key={index} href={social.url} target="_blank" rel="noopener noreferrer">
|
|
<i className={social.icon}></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeaderTop;
|