Blog Post - Copy this React, Tailwind Component to your project

Import axios from 'axios'; import React, { useEffect, useState, useCallback } from 'react' import { useParams } from 'react router dom'; import BlogSidebar from './BlogSidebar'; import BASE_URL from '../../config'; const Signblog = () => { const [data, setData] = useState(); const [count , setCount] = useState(); const { title } = useParams(); console.log(title) const handleBlog = useCallback(async () => { try { const response = await axios.get(`${BASE_URL}/blogs/${title}`); setData(response.data.blog); setCount(response.data.count) } catch (error) { console.error('Error fetching blog:', error); } }, [title]); useEffect(() => { handleBlog(); }, [handleBlog]); return ( <> <div className="pattern square"></div> <div className="py xl 9 py 4"> <div className="container"> <div className="row"> <article className="col lg 8"> <h1>{data && data.title}</h1> <p>{data && data.description}</p> <div className="d flex align items center mt 3"> <div className="me 5"> <span className="fs 6">Written by</span> <div className="d flex align items center mt 2"> <img src="https://st4.depositphotos.com/2398103/20427/v/450/depositphotos_204276162 stock illustration illustration user blue circle icon.jpg" alt="Avatar" className="avatar avatar xs rounded circle" /> <div className="ms 2"> <a href="#" className="text reset fs 6">{data && data.author.full_name}</a> </div> </div> </div> <div> <span className="fs 6">Published on</span> <div className="mt 2 text dark"> <span className="fs 6">{data && new Date(data.createdAt).toLocaleDateString('en US', { month: 'short', day: '2 digit', year: 'numeric' }) }</span> </div> </div> <div className='mx 5'> <span className="fs 6">Veiw</span> <div className="mt 2 text dark"> <span className='fs 6'>{data && data.view_count}</span> </div> </div> </div> <figure className="my 6"> <img src={data && data.image_url} alt="blog" className="rounded 3 img fluid w 100" /> </figure> <div className="image_width"> <div dangerouslySetInnerHTML={{ __html: data && data.content }} /> </div> </article> <BlogSidebar category ={count}/> </div> </div> </div> </> ) } export default Signblog; this is my component i want to add a rating and comment system here make powerful animated rating and comment system also make new comment input