minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

fix visa build

Browse Source
This commit is contained in:
r2xrzh9q2z-lab
2026-02-06 12:00:28 +07:00
parent f0f7c5228d
commit f9da2970a4
2 changed files with 35 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app/visa/[slug]/VisaDetail.tsx
View File

@@ -7,24 +7,33 @@ interface VisaDetailProps {
}
export default function VisaDetail({ country }: VisaDetailProps) {
// 1. Kiểm tra an toàn (Null Check)
// Vì detailedView có kiểu là 'DetailedView | undefined', ta phải chắc chắn nó tồn tại
if (!country || !country.detailedView) {
return (
<div className="section-padding text-center">
<h3>Đang tải dữ liệu...</h3>
</div>
);
}
const { name: rootName, detailedView } = country;
// 2. Bóc tách dữ liệu sau khi đã kiểm tra detailedView tồn tại
const {
activeCountry: countryData,
relatedCountries,
contactInfo,
} = country.detailedView;
} = detailedView;
return (
<>
{/* Breadcrumb-Wrapper Section Start */}
<Breadcrumb title={rootName} current={rootName} />
{/* Country-details Section Start */}
<section className="country-details-section section-padding fix">
<div className="container">
<div className="country-details-wrapper">
<div className="row g-4">
{/* Main Content */}
<div className="col-lg-8">
<div className="country-details-post">
<div className="details-image">
@@ -38,33 +47,19 @@ export default function VisaDetail({ country }: VisaDetailProps) {
{/* Visa Types */}
<div className="tourist-visa-box">
{/* Render mảng đầu tiên (index 0) */}
{countryData.visaTypes?.[0] && (
<div className="tourist-box style-2">
{countryData.visaTypes[0].items.map(
(item: any, itemIdx: number) => (
<div key={itemIdx} className="tourist-content">
<h5>{item.title}</h5>
<p>{item.description}</p>
</div>
),
)}
{countryData.visaTypes?.map((type: any, idx: number) => (
<div
key={idx}
className={`tourist-box ${idx === 0 ? "style-2" : ""}`}
>
{type.items.map((item: any, itemIdx: number) => (
<div key={itemIdx} className="tourist-content">
<h5>{item.title}</h5>
<p>{item.description}</p>
</div>
))}
</div>
)}
{/* Render mảng thứ hai (index 1) */}
{countryData.visaTypes?.[1] && (
<div className="tourist-box">
{countryData.visaTypes[1].items.map(
(item: any, itemIdx: number) => (
<div key={itemIdx} className="tourist-content">
<h5>{item.title}</h5>
<p>{item.description}</p>
</div>
),
)}
</div>
)}
))}
</div>
{/* Visa Process */}
@@ -102,49 +97,6 @@ export default function VisaDetail({ country }: VisaDetailProps) {
)}
</div>
)}
{/* Visa Categories */}
{countryData.visaCategories && (
<>
<h3 className="text mb-3">
{countryData.visaCategories.title}
</h3>
{countryData.visaCategories.steps.map(
(subGroup: string[], groupIdx: number) => (
<ul className="visa-list-2" key={groupIdx}>
{subGroup.map((category: string, idx: number) => (
<li key={idx}>
<i className="fa-solid fa-chevrons-right"></i>
{category}
</li>
))}
</ul>
),
)}
</>
)}
{/* Service Options */}
{countryData.visaService && (
<>
<h3 className="text">
{countryData.visaService.title}
</h3>
<ul className="list-item">
{countryData.visaService.steps.map(
(process: any, idx: number) => (
<li key={idx}>
<strong>
{process.number}. {process.title} -
</strong>
<span> {process.description}</span>
</li>
),
)}
</ul>
</>
)}
</div>
</div>
</div>
@@ -152,7 +104,7 @@ export default function VisaDetail({ country }: VisaDetailProps) {
{/* Sidebar */}
<div className="col-lg-4">
<div className="country-details-sideber">
{relatedCountries.map((relCountry: any, idx: number) => (
{relatedCountries?.map((relCountry: any, idx: number) => (
<div key={idx} className="icon-box-item">
<div className="left-item">
<div className="icon">
@@ -178,8 +130,6 @@ export default function VisaDetail({ country }: VisaDetailProps) {
<div className="content">
<h3>{contactInfo.sectionTitle}</h3>
<p>{contactInfo.helpText}</p>
{/* Phone */}
<div className="icon-item">
<div className="icon">
<i className="fa-solid fa-phone"></i>
@@ -187,13 +137,15 @@ export default function VisaDetail({ country }: VisaDetailProps) {
<div className="cont">
<span>{contactInfo.phone.label}: </span>
<h6>
<a href={contactInfo.phone.link}>
<a
href={contactInfo.phone.link}
style={{ color: "white" }}
>
{contactInfo.phone.value}
</a>
</h6>
</div>
</div>
{/* Email */}
<div className="icon-item">
<div className="icon">