abc abc

import React from ‘react’;

import { Link } from ‘react-router-dom’;

import PropTypes from ‘prop-types’;

const FeaturedBlogCard = ({ post, getCategoryName }) => {

if (!post) {

return (

<div className=”block bg-white rounded-xl overflow-hidden border border-[#022150]”>

<div className=”md:flex”>

<div className=”md:w-1/2 h-64 md:h-80 bg-gray-200″></div>

<div className=”md:w-1/2 p-6″>

<div className=”h-4 bg-gray-300 rounded mb-2 w-1/3″></div>

<div className=”h-6 bg-gray-300 rounded mb-4 w-3/4″></div>

<div className=”h-4 bg-gray-200 rounded mb-2 w-full”></div>

<div className=”h-4 bg-gray-200 rounded mb-4 w-2/3″></div>

<div className=”h-4 bg-gray-300 rounded w-1/4″></div>

</div>

</div>

</div>

);

}

const featuredImage =

post._embedded?.[‘wp:featuredmedia’]?.[0]?.source_url ||

‘/assets/placeholder.png’;

const author =

post._embedded?.author?.[0]?.name ||

‘WrittenlyHub’;

const date = post.date

? new Date(post.date).toLocaleDateString(‘en-US’, {

year: ‘numeric’,

month: ‘short’,

day: ‘numeric’,

})

: ”;

const categoryId = post.wh_category?.[0];

const categoryName = categoryId && getCategoryName ? getCategoryName(categoryId) : ”;

const title = post.title?.rendered || ‘Untitled Post’;

const excerpt = post.excerpt?.rendered || ”;

const slug = post.slug || ”;

const cleanExcerpt = excerpt.replace(/<[^>]*>/g, ”).substring(0, 200) + ‘…’;

return (

<Link

to={`/blog/${slug}`}

className=”block bg-white rounded-xl overflow-hidden border border-[#022150]”

>

<div className=”md:flex”>

<div className=”md:w-1/2″>

<img

src={featuredImage}

alt={title}

className=”w-full h-64 md:h-80 object-cover”

onError={(e) => {

e.target.src = ‘/assets/placeholder.png’;

}}

/>

</div>

<div className=”md:w-1/2 p-6 flex flex-col justify-center”>

{categoryName && (

<span className=”inline-block px-3 py-1 text-xs font-semibold text-orange-500 bg-transparent rounded-full mb-3 w-fit”>

{categoryName}

</span>

)}

<h2

className=”text-2xl md:text-3xl font-bold mb-4 text-[#022150] line-clamp-2″

dangerouslySetInnerHTML={{ __html: title }}

/>

{cleanExcerpt && (

<p className=”text-gray-600 mb-4 line-clamp-3 leading-relaxed”>

{cleanExcerpt}

</p>

)}

<div className=”flex items-center justify-between”>

<div className=”flex items-center text-sm text-gray-500″>

{date && <span>{date}</span>}

{date && author && <span className=”mx-2″>•</span>}

{author && <span>By {author}</span>}

</div>

<span className=”text-orange-500 font-semibold text-sm border border-orange-500 rounded-full px-3 py-1″>

Read More

</span>

</div>

</div>

</div>

</Link>

);

};

FeaturedBlogCard.propTypes = {

post: PropTypes.shape({

id: PropTypes.number,

slug: PropTypes.string,

date: PropTypes.string,

title: PropTypes.shape({

rendered: PropTypes.string

}),

excerpt: PropTypes.shape({

rendered: PropTypes.string

}),

wh_category: PropTypes.array,

_embedded: PropTypes.shape({

author: PropTypes.array,

‘wp:featuredmedia’: PropTypes.array

})

}),

getCategoryName: PropTypes.func

};

export default FeaturedBlogCard;