Product overviews
Product detail page layout: large image + name + price + description + actions.
Preview
Throwback Hip Bag
$90
Sturdy waxed canvas with leather pulls.
React preview
LiveView (HEEx)
alias DesignSystem.UI.ProductOverviews
<ProductOverviews.product_overview
name={@product.name}
price={@product.price}
image_src={@product.image_url}
description={@product.description}
>
<:actions>
<Buttons.button phx-click="add_to_bag" phx-value-id={@product.id}>Add to bag</Buttons.button>
</:actions>
</ProductOverviews.product_overview>
React (JSX)
import { ProductOverview } from "../ui/index.mjs"
<ProductOverview
name={product.name}
price={product.price}
imageSrc={product.imageUrl}
actions={<Button onClick={onAddToBag}>Add to bag</Button>}
/>