render-post.ts

/**
 * Supported locales
 */
type Locale = "en" | "ar";

/**
 * Determines localized UI elements and data shown
 */
let currentLocale: Locale = "en";

/**
 * Retrieve HTML for a single post, humanizing the post's date
 */
function renderPost(post: Post): string {
  const avatarMargin = currentLocale === "en" ? "mr-3" : "ml-3";
  
  return ( 
  `<li class="list-group-item">
    <div class="d-flex">
      <div 
        class="${avatarMargin} rounded-circle"
        style="width: 4rem; height: 4rem; overflow: hidden;"
      >
        <img src="${post.photo}"
            style="object-fit: cover; object-position: center; min-height: 100%; width: 100%;"
        />
    </div>

    <div style="flex: 1;">
      <h4 class="h6 d-flex justify-content-between align-items-baseline">
        <span>${post.name} ${__("posted")}</span>
        <span class="small">${humanFriendlyDate(post.posted_at)}</span>
      </h4>

      <p style="text-align: ${currentLocale === "en" ? "left" : "right"}">
        ${post.post}
      </p>

      </div>
    </div>
  </li>`
    );
}