import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
import { defaultTheme } from "@/components/email/theme-default";
export function MasonryProductDetailDemo() {
return (
<MasonryProductDetail
ratingPosition="bottom"
headerPosition="default"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/masonry-product-detail
Usage
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";<MasonryProductDetail ratingPosition="bottom" headerPosition="default" />Examples
Product detail with masonry image grid and details
rating at the bottom
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
export function MasonryProductDetailRatingPositionBottomHeaderPositionDefaultExampleDemo() {
return (
<MasonryProductDetail ratingPosition="bottom" headerPosition="default" />
);
}rating at the top
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
export function MasonryProductDetailRatingPositionTopExampleDemo() {
return <MasonryProductDetail ratingPosition="top" />;
}rating aside
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
export function MasonryProductDetailRatingPositionAsideExampleDemo() {
return <MasonryProductDetail ratingPosition="aside" />;
}rating aside with header at the top
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
export function MasonryProductDetailRatingPositionAsideHeaderPositionTopExampleDemo() {
return <MasonryProductDetail ratingPosition="aside" headerPosition="top" />;
}header at the top
import { MasonryProductDetail } from "@/components/email/masonry-product-detail";
export function MasonryProductDetailHeaderPositionTopExampleDemo() {
return <MasonryProductDetail headerPosition="top" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
product | { name?: string; price?: string; description?: string; features?: string[]; colors?: string[]; sizes?: string[]; ctaLabel?: string; ctaHref?: string } | - | Configures the component's product. |
images | Array<{ src: string; alt?: string }> | - | Configures the component's images. |
ratingPosition | "top" | "bottom" | "aside" | "bottom" | Configures the component's ratingposition. |
headerPosition | "top" | "default" | "default" | Configures the component's headerposition. |