import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
import { defaultTheme } from "@/components/email/theme-default";
export function ThreeImageProductDetailDemo() {
return (
<ThreeImageProductDetail
ratingPosition="bottom"
headerPosition="default"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/three-image-product-detail
Usage
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";<ThreeImageProductDetail ratingPosition="bottom" headerPosition="default" />Examples
Product detail with three images and details
rating at the bottom
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
export function ThreeImageProductDetailRatingPositionBottomHeaderPositionDefaultExampleDemo() {
return (
<ThreeImageProductDetail ratingPosition="bottom" headerPosition="default" />
);
}rating at the top
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
export function ThreeImageProductDetailRatingPositionTopExampleDemo() {
return <ThreeImageProductDetail ratingPosition="top" />;
}rating aside
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
export function ThreeImageProductDetailRatingPositionAsideExampleDemo() {
return <ThreeImageProductDetail ratingPosition="aside" />;
}rating aside with header at the top
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
export function ThreeImageProductDetailRatingPositionAsideHeaderPositionTopExampleDemo() {
return (
<ThreeImageProductDetail ratingPosition="aside" headerPosition="top" />
);
}header at the top
import { ThreeImageProductDetail } from "@/components/email/three-image-product-detail";
export function ThreeImageProductDetailHeaderPositionTopExampleDemo() {
return <ThreeImageProductDetail 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 }, { 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. |