React Marketplace Catalog Page
The browse surface. A faceted sidebar filters by category, package family, and lifecycle — each option carries a live count and lifecycle rows reuse the real LifecycleBadge — with a search box across part number, name, and description. The toolbar reports the result count, sorts (relevance / price / newest), and toggles between a ProductCard grid and a compact list. Everything is live: check a facet, type a query, flip the layout. This is the page that funnels into the product detail page.
AXM Components · Catalog
Semiconductors & modules
AXM-330 SoC — Industrial
Quad Cortex-A53 application platform, 16nm.
- Package
- FCBGA-256
- Max freq
- 1200 MHz
AXM-550 SoC — Safety
Adds a lock-step Cortex-R52 safety island, ASIL-D.
- Package
- FCBGA-676
- Max freq
- 1200 MHz
AXM-110 SoC — Entry
Dual-core entry platform for cost-sensitive designs.
- Package
- QFN-48
- Max freq
- 800 MHz
STM32H7 MCU
Cortex-M7 MCU, 2 MB flash, 1 MB RAM.
- Package
- LQFP-144
- Max freq
- 480 MHz
RFX-91 Transceiver
Sub-6 GHz RF transceiver, 40 MHz bandwidth.
- Package
- QFN-40
- Max freq
- 6000 MHz
RFX-45 Front-End
Integrated LNA + PA front-end module.
- Package
- QFN-24
- Max freq
- 3800 MHz
PMU-12C PMIC
12-rail power-management IC.
- Package
- QFN-24
3 A Buck Converter
3.8–30 V, 3 A step-down converter.
- Package
- SOT-583
AXM-090 SoC — Legacy
Single-core legacy platform. Not for new designs.
- Package
- QFN-32
- Max freq
- 600 MHz
MEM-256 DDR PHY
LPDDR4 memory PHY companion die.
- Package
- FBGA-90
- Max freq
- 2133 MHz
Installation
Composition
| Piece | Source | Role |
|---|---|---|
| ProductCard | product-card | Grid cells |
| LifecycleBadge | product-card | Lifecycle facet rows + list badges |
| Button | button | Card + list actions |
| Facet sidebar | inline | Category / package / lifecycle checkboxes w/ counts |
| Toolbar | inline | Result count, sort select, grid/list toggle |
Filter selections, search text, sort key, and layout are the only state; the result set is derived with useMemo. Facet counts are computed from the full dataset. Replace the demo parts with your catalog and move the filtering to your server query when the dataset outgrows the client.