home-frontend/src/scripts/components/testimonial-card.js

import { createElement } from '../utils/dom.js';

function initials(name) {
    return name
        .split(' ')
        .map((word) => word[0])
        .join('')
        .slice(0, 2)
        .toUpperCase();
}

export function createTestimonialCard(testimonial) {
    const card = createElement('div', 'testimonial-card');
    let avatarHTML;

    if (testimonial.avatar) {
        if (testimonial.avatarSmall) {
            avatarHTML = `<img src="${testimonial.avatarSmall}" alt="" width="34" height="34" loading="lazy" decoding="async"
                srcset="${testimonial.avatarSmall} 60w, ${testimonial.avatar} 120w" sizes="60px">`;
        } else {
            avatarHTML = `<img src="${testimonial.avatar}" alt="" width="34" height="34" loading="lazy" decoding="async">`;
        }
    } else {
        avatarHTML = initials(testimonial.name || '?');
    }

    card.innerHTML = `
        <div class="testimonial-top">
            <div class="testimonial-user">
                <div class="testimonial-avatar">${avatarHTML}</div>
                <div class="testimonial-names">
                    <span class="testimonial-name">${testimonial.name}</span>
                    <span class="testimonial-handle">${testimonial.handle || ''}</span>
                </div>
            </div>
        </div>
        <p class="testimonial-text">${testimonial.text}</p>
    `;

    return card;
}