creating dynamic sustainabilty info

& item details refactor

components/product/description-content.tsx

@@ -23,9 +23,11 @@ export function DescriptionContent({ product }: { product: Product }) {
   }
 
   const certificationLink = (credType: keyof typeof credentials) => {
-    return <a className='text-underline' href={`#${getCertificationId(credType)}`}> {credentials[credType].title} certified</a>
+    return <a className='text-underline text-xs' href={`#${getCertificationId(credType)}`}> {credentials[credType].title} certified</a>
   }
 
+  const commonDetailKeys = Object.keys(itemDetails.common)
+
   return (
     <>
       <div className="mt-6">
@@ -34,16 +36,25 @@ export function DescriptionContent({ product }: { product: Product }) {
           <p className='font-bold mt-6'>Details:</p>
           <ul className='list-disc list-inside'>
             <li className='mt-2'>
-              {itemDetails.content},
+              {itemDetails.content}* -
               {certificationLink('gots')}
             </li>
             <li className='mt-1'>
-              {itemDetails.print},
+              {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>
+            {commonDetailKeys.map(detail => (
+
+              // <div>{detail}</div>
+              <li key={detail} className="mt-1">
+                {itemDetails.common[detail as keyof typeof itemDetails.common]}
+              </li>
+            ))}
+
+            <p className='mt-4 text-xs'>
+              * Yes you read that right, 100%, this includes our brand label.
+            </p>
           </ul>
         </div>
       </div>

components/product/sustainability-info.tsx

@@ -1,20 +1,28 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { credentials, credentialsKeys } from "constants/sustainability";
 
+
 export function SustainabilityInfo() {
   return (
     <>
       <div>
           <p className='font-bold mt-6'>Credentials:</p>
-          <ul className='mt-2'>
+          <Accordion type="single" collapsible>
             {credentialsKeys.map(credential => (
-              <li 
-              key={credential}
-              id={credential}
-              >
-                {credentials[credential as keyof typeof credentials].title}
-              </li>
+              <AccordionItem id={credential} key={credential} value={credential}>
+                <AccordionTrigger className="text-sm py-3">{credentials[credential as keyof typeof credentials].title}</AccordionTrigger>
+                <AccordionContent>
+                  "{credentials[credential as keyof typeof credentials].excerpt}" <br /><br/>
+                  <a className="text-bold pt-6" href={credentials[credential as keyof typeof credentials].link}>Read more</a>
+                </AccordionContent>
+              </AccordionItem>
             ))}
-          </ul>
+          </Accordion>
         </div>
     </>
   )