BlogCard Component
This component displays a blog card with an image, date, author, title, tags, and description. It supports multiple sizes.
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
date | Date | No | new Date() | The publication date of the blog post. |
author | string | No | "author" | The author of the blog post. |
title | string | No | "Title" | The title of the blog post. |
tags | string[] | No | [] | An array of tags associated with the blog post. |
image | string | null | No | require("/static/img/test-image16x9.png").default | The image URL for the blog post. |
description | string | No | "Some description here" | The description of the blog post. |
size | "large" | "small" | No | "small" | The size of the blog card. Determines the maximum width. |
Usage
BlogCard
<BlogCard
date={new Date()}
author="John Doe"
title="An Interesting Blog Post"
tags={['React', 'TailwindCSS']}
image="/path/to/image.jpg"
description="This is a brief description of the blog post."
size="large"
/>
Examples
Small Size
8/21/2024
@John Doe
An Interesting Blog Post
#React
#TailwindCSS
Large Size
8/21/2024
@Jane Smith
A Fascinating Blog Post
#JavaScript
#CSS
No Image
8/21/2024
@Alex Johnson
A Blog Post Without an Image
#HTML
#Web Development