CategoriesPage.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './CategoriesPage.css'; // Import the CSS file

const CategoriesPage = () => {
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('http://127.0.0.1:8000/themeApp/categories/')  // Replace with your Django API endpoint
      .then(response => {
        setCategories(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading categories: {error.message}</p>;

  return (
    <div className="categories-container">
    <div className="categories-list">
      {categories.map((category, index) => (
        <div 
          key={index} 
          className="category-item"
          onClick={() => { 
            window.location.href = category.name;
          }}
        >
          <img 
            src={category.image} 
            alt={category.name} 
            className="category-image"
          />
        </div>
      ))}
    </div>
  </div>
);
};

export default CategoriesPage;