Is there a better way to display filenames of multiple files?

Here’s my approach.

function generateLinksHTML(urlString) {
  // Splits the comma-delimited string into an array of URLs
  const urls = urlString.split(',');

  // Decodes URL-encoded characters using decodeURIComponent
  const decodeUrls = urls.map(url => decodeURIComponent(url));

  // Defines the inline CSS for the pill-style links
  const linkStyle = 'padding: 8px 15px; background-color: #613DC7; color: white; text-decoration: none; border-radius: 20px; margin: 5px; display: inline-block; font-size: 14px;';

  // Creates an HTML string with anchor tags for each URL, including the ↗ emoji
  const linksHTML = decodeUrls.map(url => {
    const fileName = url.split('/').pop();
    return `<a href="${url}" target="_blank" style="${linkStyle}">↗ ${fileName}</a>`;
  }).join('');

  // Returns the full HTML string
  return `<div class="links-component" style="margin-bottom: 10px;">${linksHTML}</div>`;
}

return generateLinksHTML(p1)
6 Likes