Renders a responsive 2-row decorative icon grid that fills the viewport width, randomly distributing icons while avoiding adjacent duplicates. Used as a visual background/separator element. ## Key Components - **`ResponsiveIconsBlock`** — Main exported component that calculates column count from viewport width and renders a grid of icons - **`IconsBlockProps`** — Interface with optional `loading` boolean to force the placeholder skeleton state - **`availableIcons`** — Static array of 12 icon components (custom SVGs + Lucide icons) defined outside the component to prevent re-instantiation - **Seeded pseudo-random layout** — Uses `Date.now()` as a stable seed per mount to deterministically assign icons without adjacent repeats ## Usage Example ```typescript import { ResponsiveIconsBlock } from './icons-block'; // Standard decorative separator export default function PageHeader() { return ( <> ); } // Force loading skeleton (e.g. while parent data fetches) export function LoadingLayout() { return ; } ``` ## Behavior Notes | State | Renders | |---|---| | `loading={true}` | Pulsing `#2A2A2A` placeholder bar | | Grid not yet computed | Same placeholder bar | | Grid ready | Full icon grid | - Column count recalculates on `window.resize` (`Math.ceil(width / 56) + 4`) - All icons are forced to a muted gray (`grayscale + brightness` CSS filter) via an injected `