this is acturyll the adding of the component to show blog entries

import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom"; // Assuming you're using React Router

const BlogEnties = () => {

  const [entries, setEntries] = useState([]);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

  useEffect(() => {

    // Fetch blog entries from the backend

    const fetchEntries = async () => {

      try {

        const response = await fetch("/tornado-backend/blog-entries"); // Replace with your actual API endpoint

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

        const data = await response.json();

        setEntries(data);

      } catch (err) {

        setError(err.message);

      } finally {

        setLoading(false);

      }

    };

    fetchEntries();

  }, []);

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error}</p>;

  return (

    <div>

      <h1>Blog Entries</h1>

      <table border="1" style={{ width: "100%", borderCollapse: "collapse" }}>

        <thead>

          <tr>

            <th>ID</th>

            <th>Title</th>

            <th>Slug</th>

            <th>Published</th>

            <th>Updated</th>

            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

          {entries.map((entry) => (

            <tr key={entry.id}>

              <td>{entry.id}</td>

              <td>{entry.title}</td>

              <td>{entry.slug}</td>

              <td>{new Date(entry.published).toLocaleString()}</td>

              <td>{new Date(entry.updated).toLocaleString()}</td>

              <td>

                <Link to={`/update-entry/${entry.id}`}>Update</Link>

              </td>

            </tr>

          ))}

        </tbody>

      </table>

    </div>

  );

};

export default BlogEnties;