import { SplitProductDetail } from "@/components/email/split-product-detail";
import { defaultTheme } from "@/components/email/theme-default";
export function SplitProductDetailDemo() {
return (
<SplitProductDetail
treatment="stacked"
placement="left"
theme={defaultTheme}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/split-product-detail
Usage
import { SplitProductDetail } from "@/components/email/split-product-detail";<SplitProductDetail treatment="stacked" placement="left" />Examples
Split product detail
stacked left
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentStackedPlacementLeftExampleDemo() {
return <SplitProductDetail treatment="stacked" placement="left" />;
}stacked right
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentStackedPlacementRightExampleDemo() {
return <SplitProductDetail treatment="stacked" placement="right" />;
}side left
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentSidePlacementLeftExampleDemo() {
return <SplitProductDetail treatment="side" placement="left" />;
}side right
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentSidePlacementRightExampleDemo() {
return <SplitProductDetail treatment="side" placement="right" />;
}rating left
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentRatingPlacementLeftExampleDemo() {
return <SplitProductDetail treatment="rating" placement="left" />;
}rating right
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentRatingPlacementRightExampleDemo() {
return <SplitProductDetail treatment="rating" placement="right" />;
}bleed left
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentBleedPlacementLeftExampleDemo() {
return <SplitProductDetail treatment="bleed" placement="left" />;
}bleed right
import { SplitProductDetail } from "@/components/email/split-product-detail";
export function SplitProductDetailTreatmentBleedPlacementRightExampleDemo() {
return <SplitProductDetail treatment="bleed" placement="right" />;
}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. |
treatment | "stacked" | "side" | "rating" | "bleed" | "stacked" | Configures the component's treatment. |
placement | "left" | "right" | "left" | Configures the component's placement. |