Active filter

CONTRIBUTING.md

@@ -2,6 +2,8 @@
 
 Thanks for contributing! Follow these guidelines to keep the codebase consistent.
 
+
+
 ## Prerequisites
 
 - Node.js 18+

docs/Tabs.md

@@ -2,6 +2,8 @@
 
 ## Overview
 
+
+
 The `Tabs` component replaces the inline tab navigation in `ApiDetailPage` with a reusable, fully accessible tab strip featuring a **smooth sliding ink-bar indicator** that animates between tabs using CSS `transition` driven by DOM geometry measurements. No animation libraries required.
 
 ---

src/components/ActiveFilterChips.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+
+interface ActiveFilterChipsProps {
+  categories: Set<string>;
+  minPrice: number | null;
+  maxPrice: number | null;
+  popularity: string;
+  favoritesOnly: boolean;
+  onRemoveCategory: (c: string) => void;
+  onRemoveMinPrice: () => void;
+  onRemoveMaxPrice: () => void;
+  onRemovePopularity: () => void;
+  onRemoveFavoritesOnly: () => void;
+  onClearAll: () => void;
+}
+
+export default function ActiveFilterChips({
+  categories,
+  minPrice,
+  maxPrice,
+  popularity,
+  favoritesOnly,
+  onRemoveCategory,
+  onRemoveMinPrice,
+  onRemoveMaxPrice,
+  onRemovePopularity,
+  onRemoveFavoritesOnly,
+  onClearAll,
+}: ActiveFilterChipsProps) {
+  const chips: { key: string; label: string; onRemove: () => void }[] = [];
+
+  categories.forEach((c) => {
+    chips.push({
+      key: `cat-${c}`,
+      label: `Category: ${c}`,
+      onRemove: () => onRemoveCategory(c),
+    });
+  });
+
+  if (minPrice !== null) {
+    chips.push({
+      key: 'minPrice',
+      label: `Min price: $${minPrice}`,
+      onRemove: onRemoveMinPrice,
+    });
+  }
+
+  if (maxPrice !== null) {
+    chips.push({
+      key: 'maxPrice',
+      label: `Max price: $${maxPrice}`,
+      onRemove: onRemoveMaxPrice,
+    });
+  }
+
+  if (popularity !== 'any') {
+    chips.push({
+      key: 'popularity',
+      label: `Popularity: ${popularity}`,
+      onRemove: onRemovePopularity,
+    });
+  }
+
+  if (favoritesOnly) {
+    chips.push({
+      key: 'favorites',
+      label: 'Favorites only',
+      onRemove: onRemoveFavoritesOnly,
+    });
+  }
+
+  if (chips.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="active-filter-chips" style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '16px' }}>
+      {chips.map((chip) => (
+        <div
+          key={chip.key}
+          className="filter-chip"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '4px 12px',
+            background: 'var(--surface-soft)',
+            border: '1px solid var(--line)',
+            borderRadius: '16px',
+            fontSize: '0.875rem',
+            color: 'var(--text)',
+            height: '32px',
+          }}
+        >
+          <span>{chip.label}</span>
+          <button
+            type="button"
+            onClick={chip.onRemove}
+            aria-label={`Remove filter ${chip.label}`}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'var(--text-muted)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '44px',
+              height: '44px',
+              margin: '-6px -12px -6px -4px',
+              fontSize: '1.25rem',
+              lineHeight: 1,
+            }}
+          >
+            &times;
+          </button>
+        </div>
+      ))}
+      {chips.length >= 2 && (
+        <button
+          type="button"
+          onClick={onClearAll}
+          className="ghost-button"
+          style={{ fontSize: '0.875rem', padding: '4px 12px' }}
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}

src/data/mockApis.ts

@@ -7,6 +7,8 @@ export type Review = {
   verified: boolean;
 };
 
+
+
 export type APIItem = {
   id: string;
   name: string;

src/pages/MarketplacePage.tsx

@@ -7,6 +7,7 @@ import SearchBar from "../components/SearchBar";
 import SortDropdown, { type SortValue } from "../components/SortDropdown";
 
 import FiltersSidebar from "../components/FiltersSidebar";
+import ActiveFilterChips from "../components/ActiveFilterChips";
 import EmptyState from "../components/EmptyState";
 import { Pagination } from "../components/Pagination";
 import MOCK_APIS, { type APIItem } from "../data/mockApis";
@@ -458,6 +459,20 @@ export default function MarketplacePage(): JSX.Element {
             </div>
           </div>
 
+          <ActiveFilterChips
+            categories={selectedCategories}
+            minPrice={minPrice}
+            maxPrice={maxPrice}
+            popularity={popularity}
+            favoritesOnly={favoritesOnly}
+            onRemoveCategory={(c) => toggleCategory(c)}
+            onRemoveMinPrice={() => setMinPrice(null)}
+            onRemoveMaxPrice={() => setMaxPrice(null)}
+            onRemovePopularity={() => setPopularity("any")}
+            onRemoveFavoritesOnly={() => setFavoritesOnly(false)}
+            onClearAll={clearFilters}
+          />
+
           {fetchError ? (
             <EmptyState variant="error" onRetry={handleRetryFetch} />
           ) : filtered.length === 0 ? (