import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
import { defaultTheme } from "@/components/email/theme-default";
export function TwoImageProductDetailDemo() {
return (
<TwoImageProductDetail
ratingPosition="bottom"
headerPosition="default"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/two-image-product-detail
Usage
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";<TwoImageProductDetail ratingPosition="bottom" headerPosition="default" />Examples
Product detail with two images and details
rating at the bottom
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
export function TwoImageProductDetailRatingPositionBottomHeaderPositionDefaultExampleDemo() {
return (
<TwoImageProductDetail ratingPosition="bottom" headerPosition="default" />
);
}rating at the top
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
export function TwoImageProductDetailRatingPositionTopExampleDemo() {
return <TwoImageProductDetail ratingPosition="top" />;
}rating aside
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
export function TwoImageProductDetailRatingPositionAsideExampleDemo() {
return <TwoImageProductDetail ratingPosition="aside" />;
}rating aside with header at the top
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
export function TwoImageProductDetailRatingPositionAsideHeaderPositionTopExampleDemo() {
return <TwoImageProductDetail ratingPosition="aside" headerPosition="top" />;
}header at the top
import { TwoImageProductDetail } from "@/components/email/two-image-product-detail";
export function TwoImageProductDetailHeaderPositionTopExampleDemo() {
return <TwoImageProductDetail 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 | [{ src: string; alt?: string }, { 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. |