48 lines
1.0 KiB
JavaScript
48 lines
1.0 KiB
JavaScript
/**
|
|
* Book Reviews Component
|
|
* Displays customer reviews for a book
|
|
*/
|
|
class BookReviews extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.reviews-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg, 1.5rem);
|
|
}
|
|
|
|
.no-reviews {
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
color: var(--color-text-light, #64748b);
|
|
text-align: center;
|
|
padding: var(--spacing-xl, 2rem);
|
|
}
|
|
</style>
|
|
<div class="reviews-container">
|
|
<slot>
|
|
<p class="no-reviews">Nog geen recensies. Wees de eerste om een recensie te schrijven!</p>
|
|
</slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("book-reviews", BookReviews);
|