55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
type BlogCardProps = {
|
||
|
|
img: string
|
||
|
|
title: string
|
||
|
|
text: string
|
||
|
|
author: string
|
||
|
|
lasUpdate: Date
|
||
|
|
id: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BlogCard(
|
||
|
|
{ img, title, text, author, lasUpdate, id }: BlogCardProps,
|
||
|
|
) {
|
||
|
|
return (
|
||
|
|
<div class='components__blog_card' style={{ backgroundImage: img }}>
|
||
|
|
<div class='components__blog_card__spacer'></div>
|
||
|
|
<h3>
|
||
|
|
<a href={`/blog/${id}`}>{title}</a>
|
||
|
|
</h3>
|
||
|
|
<div class='components__blog_card__text'>
|
||
|
|
{`${text.slice(0, 150)} ...`}
|
||
|
|
</div>
|
||
|
|
<div class='components__blog_card__footer'>
|
||
|
|
<div>
|
||
|
|
<i class='ri-quill-pen-line'></i>
|
||
|
|
<span>{author}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<i class='ri-refresh-line'></i>
|
||
|
|
<span>{lasUpdate.toLocaleDateString()}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const text =
|
||
|
|
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, perferendis enim blanditiis consequatur at porro quod, eligendi alias recusandae modi aliquam non? Quos voluptates quisquam provident animi nisi in ratione.'
|
||
|
|
|
||
|
|
export const blogMock: BlogCardProps[] = Array(50).fill(undefined).map(
|
||
|
|
(_, index) => {
|
||
|
|
return {
|
||
|
|
author: 'PGP',
|
||
|
|
lasUpdate: randomDate(),
|
||
|
|
title: `Some title here ${index}`,
|
||
|
|
text,
|
||
|
|
img: `url("https://picsum.photos/id/${index}/300/200")`,
|
||
|
|
id: String(index),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
)
|
||
|
|
|
||
|
|
function randomDate() {
|
||
|
|
return new Date(Date.now() - Math.random() * 1e10)
|
||
|
|
}
|