Move to components, and updates

site/components/product/ProductMetafields/ProductMetafields.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import type { ProductMetafields as IProductMetafields } from '@commerce/types/product'
+import Text from '@components/ui/Text'
+
+interface Props {
+  metafields: IProductMetafields
+  /**
+   *  The namespace of the metafields to display.
+   */
+  namespace: string
+}
+
+const ProductMetafields: FC<Props> = ({ metafields, namespace }) => {
+  return (
+    <>
+      {Object.values(metafields[namespace] ?? {}).map((field) => (
+        <div
+          key={field.key}
+          className="flex gap-2 border-b py-3 border-accent-2 border-dashed last:border-b-0"
+        >
+          <strong className="leading-7">{field.name}:</strong>
+          <Text html={field.valueHtml || field.value} className="!mx-0" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default ProductMetafields