initial commit

2026-01-28 07:02:55 +01:00
commit 1ab026c35c
37 changed files with 4447 additions and 0 deletions
--- a/js/components/pages/page-home.js
+++ b/js/components/pages/page-home.js
@@ -0,0 +1,122 @@
+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);