dynamic product description comonents

components/product/description-content.tsx

@@ -0,0 +1,52 @@
+import { SCAPE } from 'constants/brand';
+import { productTypes } from 'constants/item-details';
+import { credentials, credentialsKeys } from 'constants/sustainability';
+import { Product } from 'lib/shopify/types';
+
+export function DescriptionContent({ product }: { product: Product }) {
+  const productTypeKeys = Object.keys(productTypes);
+  const checkProductType = () => {
+    return product.tags.find(tag => productTypeKeys.includes(tag));
+  }
+  const productType = checkProductType() as keyof typeof productTypes & string;
+
+  const getCertificationId = (toFind: string) => credentialsKeys.find(key => key === toFind);
+
+  if (!productType) {
+    return null;
+  }
+  
+  const itemDetails = productTypes[productType];
+
+  if (!itemDetails) {
+    return null;
+  }
+
+  const certificationLink = (credType: keyof typeof credentials) => {
+    return <a className='text-underline' href={`#${getCertificationId(credType)}`}> {credentials[credType].title} certified</a>
+  }
+
+  return (
+    <>
+      <div className="mt-6">
+        <h4 className='text-lg'>{product.title}, an exclusive artwork by {SCAPE}</h4>
+        <div>
+          <p className='font-bold mt-6'>Details:</p>
+          <ul className='list-disc list-inside'>
+            <li className='mt-2'>
+              {itemDetails.content},
+              {certificationLink('gots')}
+            </li>
+            <li className='mt-1'>
+              {itemDetails.print},
+              {certificationLink('oekoEco')}
+            </li>
+            <li className='mt-1'>{itemDetails.weight.feel} weight, {itemDetails.weight.gsm} GSM</li>
+            <li className='mt-1'>{itemDetails.fit} fit</li>
+            <li className='mt-1'>{itemDetails.style}</li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+};

components/product/product-description.tsx

@@ -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 />
     </>
   );
 }

components/product/sustainability-info.tsx

@@ -0,0 +1,21 @@
+import { credentials, credentialsKeys } from "constants/sustainability";
+
+export function SustainabilityInfo() {
+  return (
+    <>
+      <div>
+          <p className='font-bold mt-6'>Credentials:</p>
+          <ul className='mt-2'>
+            {credentialsKeys.map(credential => (
+              <li 
+              key={credential}
+              id={credential}
+              >
+                {credentials[credential as keyof typeof credentials].title}
+              </li>
+            ))}
+          </ul>
+        </div>
+    </>
+  )
+};