forked from UKSOURCE/hailearning.edu.vn
90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import headerData from "./header.json";
|
|
|
|
interface HeaderData {
|
|
top: {
|
|
phone: string;
|
|
email: string;
|
|
location: string;
|
|
socialLinks: Array<{
|
|
platform: string;
|
|
url: string;
|
|
icon: string;
|
|
}>;
|
|
languages: Array<{
|
|
name: string;
|
|
value: string;
|
|
}>;
|
|
} | null;
|
|
}
|
|
|
|
const HeaderTop: React.FC<{ data: HeaderData['top'] }> = ({ data }) => {
|
|
// Use passed data or fallback to local JSON if data is null (though parent should handle fetching)
|
|
// If data is null (initial load), we can use headerData fallback or render nothing/skeleton
|
|
|
|
const displayData = data || headerData.top;
|
|
const { phone, email, location, socialLinks, languages } = displayData;
|
|
|
|
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;
|