forked from UKSOURCE/hailearning.edu.vn
114 lines
4.3 KiB
TypeScript
114 lines
4.3 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;
|
|
}>;
|
|
};
|
|
}
|
|
|
|
const HeaderTop = () => {
|
|
const [data, setData] = useState<HeaderData>(headerData);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchHeaderData = async () => {
|
|
try {
|
|
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
|
const response = await fetch(`${apiUrl}/api/header`);
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
if (result.success && result.data && result.data.top) {
|
|
setData({
|
|
top: result.data.top,
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn("Failed to fetch header data from API, using fallback:", error);
|
|
// Use fallback data (already set as initial state)
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchHeaderData();
|
|
}, []);
|
|
|
|
const { phone, email, location, socialLinks, languages } = data.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;
|