fakhr-khaleej-blog/components/BlogCard.js

Moving and relocation services blog

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function BlogCard({ post }) {
  // Check if post exists
  if (!post || !post.slug) {
    return null;
  }

  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">
      <Link href={`/blog/${post.slug}`} passHref>
        <a className="block">
          <div className="relative h-48 sm:h-56">
            <Image 
              src={post.coverImage || '/images/placeholder.jpg'} 
              alt={post.title || 'مقال المدونة'} 
              width={600}
              height={400}
              style={{ objectFit: 'cover' }}
              className="w-full h-full"
              onError={(e) => {
                e.target.src = '/images/placeholder.jpg';
              }}
            />
            {post.featured && (
              <span className="absolute top-4 right-4 bg-accent text-white text-xs font-bold px-3 py-1 rounded-full">
                مميز
              </span>
            )}
          </div>
          <div className="p-5">
            <div className="flex mb-3">
              <span className="text-xs bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full">
                {post.category || 'عام'}
              </span>
              <span className="mr-3 text-xs text-gray-500">
                {post.date || ''}
              </span>
            </div>
            <h3 className="text-xl font-bold mb-2 line-clamp-2">{post.title || 'عنوان المقال'}</h3>
            <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt || ''}</p>
            {post.author && (
              <div className="flex items-center">
                <div className="relative w-10 h-10 rounded-full overflow-hidden">
                  <Image 
                    src={post.author.avatar || '/images/placeholder-avatar.jpg'} 
                    alt={post.author.name || 'اسم الكاتب'}
                    width={40}
                    height={40}
                    onError={(e) => {
                      e.target.src = '/images/placeholder-avatar.jpg';
                    }}
                  />
                </div>
                <div className="mr-3">
                  <p className="text-sm font-medium">{post.author.name || ''}</p>
                  <p className="text-xs text-gray-500">{post.author.title || ''}</p>
                </div>
              </div>
            )}
          </div>
        </a>
      </Link>
    </div>
  );
}