crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

dynamic product description comonents

Browse Source
This commit is contained in:
Samantha Kellow
2023-07-27 17:26:39 +01:00
parent 9db73341f5
commit 890d91eec7
5 changed files with 88 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/product/product-description.tsx
View File

@@ -1,15 +1,16 @@
import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { DescriptionContent } from './description-content';
import { SustainabilityInfo } from './sustainability-info';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
<h1 className="mb-2 text-4xl md:text-3xl font-medium">{product.title}</h1>
<div className="place-self-end mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
<Price
amount={product.priceRange.maxVariantPrice.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
@@ -17,15 +18,10 @@ export function ProductDescription({ product }: { product: Product }) {
</div>
</div>
<VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? (
<Prose
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
<DescriptionContent product={product} />
<SustainabilityInfo />
</>
);
}