---
const {data} = Astro.props;
---
<div class="breadcrumb">
    <a title="首页" href="/">首页</a>
    {
        data.map((item: { title: string; link: string }) => {
            return (
                <span class="separator">/</span>
                <a href={item.link}>{item.title}</a>
            )
        })
    }
</div>

<style>
    .breadcrumb {
		margin-left: 1rem;
		margin-bottom: 1rem;
		font-size: 0.9rem;
	}

	.breadcrumb a {
		color: #000000;
		text-decoration: none;
		transition: color 0.3s ease;
	}
</style>