hoanghapc_nextJs/src/components/product/detail/summary/index.tsx

'use client';
import { useEffect, useState } from 'react'

export default function ProductSummary({ item }: any) {
    const [mounted, setMounted] = useState(false)

    useEffect(() => {
        setMounted(true)
    }, [])

    if (!mounted) return null


    return (
        <div className="mb-3 pd-summary-group">
            <p className="leading-6 mb-2 text-16 font-600"> Thông số sản phẩm </p>

            <div> {renderSummary(item)}</div>
        </div>
    )
}


function renderSummary(data: any) {
    if (!data) return null;

    if (typeof data === 'string' && data.includes('<')) {
        const parser = new DOMParser()
        const doc = parser.parseFromString(data, 'text/html')

        return Array.from(doc.body.childNodes)
            .filter(
                node =>
                    node.nodeType === 1 &&
                    node.textContent &&
                    node.textContent.trim() !== ''
            )
            .map((node, index) => (
                <div key={index} className="item-circle">
                    {node.textContent!.trim()}
                </div>
            ))
    }

    return data
        .split(/\r?\n/)
        .filter((line: string) => line.trim() !== '')
        .map((line: string, index: number) => (
            <div key={index} className="item-circle">
                {line.trim()}
            </div>
        ))
}