import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
import { defaultTheme } from "@/components/email/theme-default";
export function SingleImageProductDetailDemo() {
return (
<SingleImageProductDetail
ratingPosition="bottom"
headerPosition="default"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/single-image-product-detail
Usage
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";<SingleImageProductDetail ratingPosition="bottom" headerPosition="default" />Examples
Single-image product detail with details
rating at the bottom
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
export function SingleImageProductDetailRatingPositionBottomHeaderPositionDefaultExampleDemo() {
return (
<SingleImageProductDetail
ratingPosition="bottom"
headerPosition="default"
/>
);
}rating at the top
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
export function SingleImageProductDetailRatingPositionTopExampleDemo() {
return <SingleImageProductDetail ratingPosition="top" />;
}rating aside
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
export function SingleImageProductDetailRatingPositionAsideExampleDemo() {
return <SingleImageProductDetail ratingPosition="aside" />;
}rating aside with header at the top
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
export function SingleImageProductDetailRatingPositionAsideHeaderPositionTopExampleDemo() {
return (
<SingleImageProductDetail ratingPosition="aside" headerPosition="top" />
);
}header at the top
import { SingleImageProductDetail } from "@/components/email/single-image-product-detail";
export function SingleImageProductDetailHeaderPositionTopExampleDemo() {
return <SingleImageProductDetail 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. |
image | { src: string; alt?: string } | - | Configures the component's image. |
ratingPosition | "top" | "bottom" | "aside" | "bottom" | Configures the component's ratingposition. |
headerPosition | "top" | "default" | "default" | Configures the component's headerposition. |