CategoriesPage.js

import React from 'react';
import './CategoriesPage.css'; // Import the CSS file

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

const CategoriesPage = () => {
  return (
    <div className="categories-container">
      <h1 className="categories-title">Categories</h1>
      <div>
        {categories.map((category, index) => (
          <div 
            key={index} 
            className="category-item"
            onClick={() => { 
              window.location.href = category.link;
            }}
          >
            {category.name}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CategoriesPage;