CategoriesPage.js

import React from 'react';

const categories = [
  { name: 'Men', link: '/category/men' },
  { name: 'Women', link: '/category/women' },
  { name: 'Kids', link: '/category/kids' },
];

const CategoriesPage = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Categories</h1>
      <div>
        {categories.map((category, index) => (
          <div 
            key={index} 
            style={{ 
              fontSize: '18px', 
              padding: '10px', 
              marginBottom: '10px', 
              border: '1px solid #ccc', 
              borderRadius: '4px',
              cursor: 'pointer' // Add cursor pointer for better UX
            }}
            onClick={() => { // Navigate to the category link on click
              window.location.href = category.link;
            }}
          >
            {category.name}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CategoriesPage;