import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
import { defaultTheme } from "@/components/email/theme-default";
export function FeaturedBlogPostDemo() {
return (
<FeaturedBlogPost
width="contained"
dateStyle="none"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/featured-blog-post
Usage
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";<FeaturedBlogPost width="contained" dateStyle="none" />Examples
Featured blog post
default
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
export function FeaturedBlogPostWidthContainedDateStyleNoneExampleDemo() {
return <FeaturedBlogPost width="contained" dateStyle="none" />;
}Featured post with large date
default
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
export function FeaturedBlogPostWidthContainedDateStyleLargeExampleDemo() {
return <FeaturedBlogPost width="contained" dateStyle="large" />;
}Full-width featured post with large date
default
import { FeaturedBlogPost } from "@/components/email/featured-blog-post";
export function FeaturedBlogPostWidthFullDateStyleLargeExampleDemo() {
return <FeaturedBlogPost width="full" dateStyle="large" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
post | { title: string; excerpt?: string; image?: { alt?: string; src: string }; author?: string; badge?: string; date?: string; month?: string; episode?: string; host?: string } | - | Configures the component's post. |
width | "contained" | "full" | "contained" | Configures the component's width. |
dateStyle | "none" | "large" | "none" | Configures the component's datestyle. |