30 03 25

Добавил сайт с UI прямо сюда
2026-03-30 00:43:49 +03:00
parent 889ce0d921
commit b33fa4aeaa
44 changed files with 5366 additions and 0 deletions
@@ -0,0 +1,48 @@
+import { renderHeader } from '../components/header.js?v=20260327192619';
+import { notifications } from '../mock-data.js?v=20260327192619';
+import { state } from '../state.js?v=20260327192619';
+
+export const pageMeta = { id: 'notifications-view', title: 'Уведомления' };
+
+function renderList(container) {
+  const active = state.notificationsTab;
+  const items = notifications[active] || [];
+  container.innerHTML = '';
+
+  items.forEach((item) => {
+    const card = document.createElement('article');
+    card.className = 'card stack';
+    card.innerHTML = `<strong>${item.title}</strong><p class="meta-muted">${item.text}</p><p class="meta-muted">${item.time}</p>`;
+    container.append(card);
+  });
+}
+
+export function render() {
+  const screen = document.createElement('section');
+  screen.className = 'stack';
+
+  screen.append(renderHeader({ title: 'Уведомления' }));
+
+  const tabs = document.createElement('div');
+  tabs.className = 'tabs';
+  tabs.innerHTML = `
+    <button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
+    <button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
+  `;
+
+  const list = document.createElement('div');
+  list.className = 'stack';
+  renderList(list);
+
+  tabs.querySelectorAll('.tab-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.notificationsTab = btn.dataset.tab;
+      tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
+      btn.classList.add('active');
+      renderList(list);
+    });
+  });
+
+  screen.append(tabs, list);
+  return screen;
+}