diff options
Diffstat (limited to 'src-migrate')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductComparisonModal.tsx | 72 | ||||
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 23 |
2 files changed, 87 insertions, 8 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index b836c892..260b6713 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -60,7 +60,8 @@ const formatPrice = (price: number) => { const renderSpecValue = (val: any) => { if (!val || val === '-') return '-'; - return String(val).replace(/<[^>]*>?/gm, ''); + // return String(val).replace(/<[^>]*>?/gm, ''); + return String(val); }; const extractAttribute = (item: any) => { @@ -777,11 +778,38 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant {isItemLoading ? ( <Spinner size="xs" color="red.500" /> ) : ( - <Text fontWeight="semibold" fontSize="12px" color="gray.800" textAlign="center" lineHeight="shorter"> - {renderSpecValue(val)} - </Text> + <Box + fontSize="12px" + fontWeight="semibold" + color="gray.800" + w="100%" + textAlign="center" + sx={{ + '& ul, & ol': { + textAlign: 'center', + paddingLeft: '1.2rem', + listStylePosition: 'outside', + margin: 0, + width: '100%' + }, + '& li': { + textAlign: 'center', + marginBottom: '4px', + fontWeight: 'normal' + }, + '& strong': { + display: 'block', + marginBottom: '2px' + }, + '& p': { + textAlign: 'center', + margin: 0 + } + }} + dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} + /> )} - <Text fontSize="10px" color="gray.600" fontWeight="normal" textAlign="center"> + <Text fontSize="10px" color="gray.600" fontWeight="bold" textAlign="center"> {row.label} </Text> </VStack> @@ -948,14 +976,44 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant py={3} px={2} borderBottom="1px solid" borderColor="gray.100" bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} - display="flex" alignItems="center" justifyContent="center" textAlign="center" + display="flex" + alignItems="center" + justifyContent="center" + textAlign="center" opacity={isLoadingMatrix ? 0.6 : 1} transition="opacity 0.2s" > {isLoadingMatrix && product && !row.values[String(product.sku)] ? ( <Spinner size="xs" color="gray.400" /> ) : ( - <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text> + <Box + fontSize="sm" + color="gray.600" + w="100%" + sx={{ + '& ul, & ol': { + textAlign: 'center', + paddingLeft: '1.2rem', + listStylePosition: 'outside', + margin: 0, + width: '100%' + }, + '& li': { + textAlign: 'center', + marginBottom: '4px', + fontWeight: 'normal' + }, + '& strong': { + display: 'block', + marginBottom: '2px' + }, + '& p': { + textAlign: 'center', + margin: 0 + } + }} + dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} + /> )} </GridItem> ); diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index d63eb365..03089afa 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -310,8 +310,29 @@ const ProductDetail = ({ product }: Props) => { if (strVal.includes('<') && strVal.includes('>')) { return ( - <div + <Box className="prose prose-sm text-gray-700" + sx={{ + '& ul, & ol': { + paddingLeft: '1.2rem', + margin: 0, + textAlign: 'left' + }, + '& li': { + fontWeight: 'normal', + marginBottom: '4px', + textAlign: 'left' + }, + '& strong': { + display: 'block', + marginBottom: '2px', + fontWeight: 'bold' + }, + '& p': { + margin: 0, + textAlign: 'left' + } + }} dangerouslySetInnerHTML={{ __html: strVal }} /> ); |