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">
      <h1 className="categories-title">Categories</h1>
      <div>
        {categories.map((category, index) => (
          <div 
            key={index} 
            className="category-item"
            onClick={() => { 
              window.location.href = category.name;
            }}
          >
            {category.name}
          </div>
        ))}
      </div>
    </div>
  );
};

export default CategoriesPage;