src/app/routers/blog/components/blog-detail-footer/blog-detail-footer.component.html

<div class="flex justify-between">
  <a
    class="flex items-center gap-2 text-base hover:text-paimon-blue-primary"
    [class.invisible]="!preName"
    [routerLink]="preUrl"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-5"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
    </svg>
    <span>{{ preName }}</span>
  </a>
  <a
    class="flex items-center gap-2 text-base hover:text-paimon-blue-primary"
    [class.invisible]="!nextName"
    [routerLink]="nextUrl"
  >
    <span>{{ nextName }}</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-5"
    >
      <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
    </svg>
  </a>
</div>