uldp.edu.vn/app/components/about/AboutHero.tsx

import Link from 'next/link';
import { AboutData } from '../../about/types';

interface AboutHeroProps {
    data: AboutData['hero'];
}

const AboutHero = ({ data }: AboutHeroProps) => {
    return (
        <section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
            <div className="shape">
                <img src="/assets/img/inner-page/shape.png" alt="img" />
            </div>
            <div className="container">
                <div className="page-heading">
                    <h1 className="breadcrumb-title">{data.title}</h1>
                    {Array.isArray(data.breadcrumb) && (
                        <ul className="breadcrumb-list">
                            {data.breadcrumb.map((item, index) => (
                                <li key={index}>
                                    {index === data.breadcrumb.length - 1 ? (
                                        item
                                    ) : (
                                        <>
                                            <Link href="/">{item}</Link>
                                            <i className="fa-solid fa-chevron-right ms-2 me-2"></i>
                                        </>
                                    )}
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            </div>
        </section>
    );
};

export default AboutHero;