MyBlog-Next/src/components/Footer.astro

---
import Hr from "./Hr.astro";
import Socials from "./Socials.astro";

const currentYear = new Date().getFullYear();

export interface Props {
  noMarginTop?: boolean;
}

const { noMarginTop = false } = Astro.props;
---

<footer class={`${noMarginTop ? "" : "mt-auto"}`}>
  <Hr noPadding />
  <div class="footer-wrapper">
    <Socials centered />
    <div class="copyright-wrapper">
      <span>Copyright &#169; {currentYear}</span>
      <span class="separator">&nbsp;|&nbsp;</span>
      <span>All rights reserved.</span>
    </div>
  </div>
</footer>

<style>
  footer {
    @apply w-full;
  }
  .footer-wrapper {
    @apply py-6 sm:py-4 flex flex-col sm:flex-row-reverse justify-between items-center;
  }
  .link-button {
    @apply p-2 my-1 hover:rotate-6;
  }
  .link-button svg {
    @apply scale-125;
  }
  .copyright-wrapper {
    @apply my-2 flex flex-col sm:flex-row items-center whitespace-nowrap;
  }
  .separator {
    @apply hidden sm:inline;
  }
</style>