62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import { t, i18n } from '../../i18n.js'
|
|
import { mockListings } from '../../data/mock-listings.js'
|
|
import '../listing-card.js'
|
|
import '../search-box.js'
|
|
|
|
class PageHome extends HTMLElement {
|
|
connectedCallback() {
|
|
this.render()
|
|
this.unsubscribe = i18n.subscribe(() => this.render())
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.unsubscribe) this.unsubscribe()
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */`
|
|
<section class="search-section">
|
|
<search-box></search-box>
|
|
</section>
|
|
|
|
<section class="recent-listings">
|
|
<h2>${t('home.recentListings')}</h2>
|
|
<div class="listings-grid">
|
|
${this.renderListings()}
|
|
</div>
|
|
</section>
|
|
`
|
|
}
|
|
|
|
renderListings() {
|
|
return mockListings.map(listing => /* html */`
|
|
<listing-card
|
|
listing-id="${listing.id}"
|
|
title="${listing.title}"
|
|
price="${listing.price}"
|
|
location="${listing.location}"
|
|
></listing-card>
|
|
`).join('')
|
|
}
|
|
}
|
|
|
|
customElements.define('page-home', PageHome)
|
|
|
|
const style = document.createElement('style')
|
|
style.textContent = /* css */`
|
|
/* Search Section */
|
|
page-home .search-section {
|
|
padding: var(--space-xl) 0;
|
|
}
|
|
|
|
/* Listings */
|
|
page-home section {
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
page-home section h2 {
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|