Blog Post Content
Installation
Run the following command
npx vibes@latest add blog-post-contentUsage
import { BlogPost, BlogPostContent } from '@/vibes/soul/sections/blog-post-content';function Usage() { return <BlogPostContent blogPost={blogPost} />;}const blogPost = { author: 'Sam Smith', content: 'My Blog Post', date: 'June 30, 2024', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1NGFjNmRiYi0xZDE2LTRiOTEtOWUyZS0zMjY1ZjBmZTk0ZjU=/plant-blog-1.jpeg', alt: 'A plant with large leaves and a short stem.', }, title: "Top 5 Plants to Purify Your Home's Air",};API Reference
BlogPostContentProps
| Prop | Type | Default |
|---|---|---|
className | string | |
blogPost* | ||
breadcrumbs | ||
className | string |
BlogPost
| Prop | Type | Default |
|---|---|---|
title* | string | |
author | string | |
date* | string | |
tags | Tag[] | null | |
content* | string | |
image | { src: string, alt: string } | null |
Breadcrumb
| Prop | Type | Default |
|---|---|---|
label* | string | |
href* | string |
Tag
| Prop | Type | Default |
|---|---|---|
label* | string | |
link* | { href: string, target string } |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --blog-post-content-font-family: var(--font-family-body); --blog-post-content-title-font-family: var(--font-family-heading); --blog-post-content-title: var(--foreground); --blog-post-content-image-background: var(--contrast-100); --blog-post-content-info-font-family: var(--font-family-body);}