57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import CardStack from '@/components/cardStack/CardStack';
|
|
import type { CardStackProps } from '@/components/cardStack/CardStack';
|
|
|
|
interface BlogPost {
|
|
id: string;
|
|
category: string;
|
|
title: string;
|
|
excerpt: string;
|
|
imageSrc: string;
|
|
imageAlt?: string;
|
|
authorName?: string;
|
|
authorAvatar?: string;
|
|
date?: string;
|
|
}
|
|
|
|
interface BlogCardOneProps extends Omit<CardStackProps, 'children'> {
|
|
blogs: BlogPost[];
|
|
}
|
|
|
|
export const BlogCardOne: React.FC<BlogCardOneProps> = ({
|
|
blogs,
|
|
...cardStackProps
|
|
}) => {
|
|
const blogElements = blogs.map(blog => (
|
|
<div key={blog.id} className="blog-card">
|
|
<div className="blog-image">
|
|
<img src={blog.imageSrc} alt={blog.imageAlt || blog.title} />
|
|
</div>
|
|
<div className="blog-content">
|
|
<span className="category">{blog.category}</span>
|
|
<h3>{blog.title}</h3>
|
|
<p>{blog.excerpt}</p>
|
|
{blog.authorName && (
|
|
<div className="author-info">
|
|
{blog.authorAvatar && (
|
|
<img src={blog.authorAvatar} alt={blog.authorName} className="avatar" />
|
|
)}
|
|
<div>
|
|
<p className="author-name">{blog.authorName}</p>
|
|
{blog.date && <p className="date">{blog.date}</p>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
));
|
|
|
|
return (
|
|
<CardStack {...cardStackProps}>
|
|
{blogElements}
|
|
</CardStack>
|
|
);
|
|
};
|
|
|
|
export default BlogCardOne;
|