Product Listing Page

Build a product listing page in React with TypeScript. The page fetches products from /api/products and displays them in a responsive grid. Each product card shows the product name, price, image, and a short description.

Users can filter products by category using a dropdown that fetches categories from /api/categories. There is also a "Add to Cart" button on each card that sends a POST to /api/cart/items.

Output

Produce TypeScript/TSX files in a src/ directory:

• src/api.ts -- API client for making requests
• src/types.ts -- TypeScript type definitions
• src/components/ProductGrid.tsx -- the main product listing page
• src/components/ProductCard.tsx -- individual product card component
• src/components/CategoryFilter.tsx -- category filter dropdown
• src/App.tsx -- app root

Do not include test files or build configuration.