123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
import { t, i18n } from '../../i18n.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="categories-desktop">
|
|
<div class="category-badges">
|
|
${this.renderCategoryBadges()}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="recent-listings">
|
|
<h2>${t('home.recentListings')}</h2>
|
|
<div class="listings-grid">
|
|
${this.renderPlaceholderListings()}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
renderCategoryBadges() {
|
|
const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports'];
|
|
return topCategories.map(cat => `
|
|
<a href="#/search?category=${cat}" class="badge">${t(`categories.${cat}`)}</a>
|
|
`).join('');
|
|
}
|
|
|
|
renderPlaceholderListings() {
|
|
const placeholders = Array(10).fill(null);
|
|
return placeholders.map((_, i) => /* html */`
|
|
<listing-card
|
|
listing-id="${i + 1}"
|
|
title="${t('home.placeholderTitle')}"
|
|
location="${t('home.placeholderLocation')}"
|
|
></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;
|
|
}
|
|
|
|
/* Category Badges (Desktop only) */
|
|
page-home .categories-desktop {
|
|
display: none;
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
page-home .categories-desktop {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
page-home .category-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
justify-content: center;
|
|
}
|
|
|
|
page-home .badge {
|
|
display: inline-block;
|
|
padding: var(--space-xs) var(--space-md);
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-full);
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
page-home .badge:hover {
|
|
background: var(--color-primary);
|
|
color: var(--color-bg);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* Listings */
|
|
page-home section {
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
page-home section h2 {
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
page-home .listings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
page-home .listings-grid {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|