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; + } }