diff --git a/src/components/MainFeed.jsx b/src/components/MainFeed.jsx
index 36b8495..cd7a70e 100644
--- a/src/components/MainFeed.jsx
+++ b/src/components/MainFeed.jsx
@@ -17,6 +17,8 @@ export default function MainFeed() {
const [sidebarOpen, setSidebarOpen] = useState(false);
// Активный пункт навигации в сайдбаре
const [activeNav, setActiveNav] = useState("Главная");
+ // Фильтр по типу объявления: null (все) | "loss" | "found"
+ const [typeFilter, setTypeFilter] = useState(null);
// Открыта ли модалка создания нового объявления
const [modalOpen, setModalOpen] = useState(false);
// Объявление, которое сейчас редактируется (null — модалка закрыта)
@@ -72,16 +74,23 @@ export default function MainFeed() {
const handleNewAd = useCallback(() => loadFeed(), [loadFeed]);
const handleEditSave = useCallback(() => loadFeed(), [loadFeed]);
- // Фильтруем объявления в зависимости от выбранной вкладки
- const filteredAds = activeNav === "Главная"
- ? ads
- : ads.filter(ad =>
- activeNav === "Вещи"
- ? ["Вещь", "Другое"].includes(ad.category)
- : activeNav === "Питомцы"
- ? ad.category === "Питомец"
- : false
- );
+ // Фильтруем объявления в зависимости от выбранной вкладки и фильтра типа
+ const filteredAds = (() => {
+ let result = activeNav === "Главная"
+ ? ads
+ : ads.filter(ad =>
+ activeNav === "Вещи"
+ ? ["Вещь", "Другое"].includes(ad.category)
+ : activeNav === "Питомцы"
+ ? ad.category === "Питомец"
+ : false
+ );
+ // Применяем фильтр по типу объявления
+ if (typeFilter) {
+ result = result.filter(ad => ad.type === typeFilter);
+ }
+ return result;
+ })();
/**
* Рендерит содержимое ленты в зависимости от текущего состояния:
@@ -158,6 +167,28 @@ export default function MainFeed() {
+ {/* Фильтр по типу объявления */}
+
+
+
+
+
+
{/* Основная область: лента + правый сайдбар */}
diff --git a/src/styles/layout.css b/src/styles/layout.css
index c0ed41c..b8fc4b5 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -35,6 +35,33 @@
.f-topbar-center { flex: 1; display: flex; justify-content: center; }
.f-topbar-spacer { width: 32px; flex-shrink: 0; }
+/* ── Filter Bar ── */
+.f-filter-bar {
+ display: flex; gap: 10px;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--border);
+ background: rgba(13,16,24,.4); backdrop-filter: blur(8px);
+ justify-content: center;
+}
+
+.f-filter-btn {
+ display: flex; align-items: center; gap: 6px;
+ padding: 10px 18px; border-radius: 12px;
+ font-family: var(--font); font-size: 0.9rem; font-weight: 600;
+ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
+ color: rgba(255,255,255,.6); cursor: pointer;
+ transition: all 0.25s ease;
+}
+.f-filter-btn:hover {
+ background: rgba(255,255,255,.1); border-color: rgba(45,224,200,.3);
+ color: rgba(255,255,255,.8);
+}
+.f-filter-btn.active {
+ background: rgba(45,224,200,.15); border-color: rgba(45,224,200,.5);
+ color: #2de0c8; box-shadow: 0 0 12px rgba(45,224,200,.25);
+ font-weight: 700;
+}
+
/* ── Feed Wrap + Scroll ── */
.f-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }
@@ -63,6 +90,16 @@
padding: 10px 16px;
font-size: 0.85rem;
}
+
+ /* Фильтр компактнее */
+ .f-filter-bar {
+ padding: 10px 12px;
+ gap: 8px;
+ }
+ .f-filter-btn {
+ padding: 8px 14px;
+ font-size: 0.85rem;
+ }
}
@media (max-width: 600px) {
@@ -77,4 +114,9 @@
height: 18px;
font-size: 1rem;
}
+
+ .f-filter-btn {
+ padding: 8px 12px;
+ font-size: 0.8rem;
+ }
}