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

Update UI, Call API

Browse Source
This commit is contained in:
r2xrzh9q2z-lab
2026-02-05 05:55:00 +07:00
parent 0bad73da4c
commit 0b2e3d2123
10 changed files with 1489 additions and 1386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
app/visa/[slug]/VisaDetail.tsx Normal file
View File

@@ -0,0 +1,233 @@
import React from "react";
import Breadcrumb from "../../components/Breadcrumb";
import { type VisaCountry } from "@/api/visa";
interface VisaDetailProps {
country: VisaCountry;
}
export default function VisaDetail({ country }: VisaDetailProps) {
const { name: rootName, detailedView } = country;
const {
activeCountry: countryData,
relatedCountries,
contactInfo,
} = country.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">
<img src={countryData.mainImage} alt="img" />
</div>
<div className="country-details-content">
<h2>{countryData.name}</h2>
<p>{countryData.description}</p>
<p className="mt-3">{countryData.additionalInfo}</p>
<h5>{countryData.tagline}</h5>
{/* 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>
),
)}
</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 */}
{countryData.visaProcess && (
<>
<h3 className="text">
{countryData.visaProcess.title}
</h3>
<ul className="list-item">
{countryData.visaProcess.steps.map(
(process: any, idx: number) => (
<li key={idx}>
<strong>
{process.number}. {process.title}
</strong>
<span>{process.description}</span>
</li>
),
)}
</ul>
</>
)}
{/* Gallery */}
{countryData.gallery && countryData.gallery.length > 0 && (
<div className="row g-4 mb-4">
{countryData.gallery.map(
(image: string, idx: number) => (
<div key={idx} className="col-lg-6">
<div className="thumb">
<img src={image} alt="gallery-img" />
</div>
</div>
),
)}
</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>
{/* Sidebar */}
<div className="col-lg-4">
<div className="country-details-sideber">
{relatedCountries.map((relCountry: any, idx: number) => (
<div key={idx} className="icon-box-item">
<div className="left-item">
<div className="icon">
<img src={relCountry.icon} alt="img" />
</div>
<h5>{relCountry.name}</h5>
</div>
<i className="fa-solid fa-chevrons-right"></i>
</div>
))}
{/* Contact Box */}
{contactInfo && (
<div
className="visa-contact-box bg-cover"
style={{
backgroundImage: `url(${contactInfo.img})`,
padding: "30px",
borderRadius: "8px",
color: "white",
}}
>
<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>
</div>
<div className="cont">
<span>{contactInfo.phone.label}: </span>
<h6>
<a href={contactInfo.phone.link}>
{contactInfo.phone.value}
</a>
</h6>
</div>
</div>
{/* Email */}
<div className="icon-item">
<div className="icon">
<i className="fa-regular fa-envelope"></i>
</div>
<div className="cont">
<span>{contactInfo.email.label}: </span>
<h6>
<a href={contactInfo.email.link}>
{contactInfo.email.value}
</a>
</h6>
</div>
</div>
{/* Location */}
<div className="icon-item">
<div className="icon">
<i className="fa-regular fa-location-dot"></i>
</div>
<div className="cont">
<span>{contactInfo.location.label}: </span>
<h6>{contactInfo.location.address}</h6>
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}