FeedbackBar.astro

---
import Link from "./Link.astro";
import { Icon } from "astro-icon/components";
import PageSurvey from "./PageSurvey";
import { site } from "../site";

const { githubUrl } = site;

const filename = Astro.url.pathname;
const issueTitle = `Issue with page \`${filename}\``;
const issueBody = `...Replace me with your issue description...`;
const issueUrlParams = `title=${issueTitle}&body=${issueBody}`;
const issueUrl = `${githubUrl}/issues/new?${encodeURI(issueUrlParams)}`;
const editUrl = `${githubUrl}/edit/main/src/content${filename}.mdx`;
---

<div class="flex items-center justify-between print:hidden">
  <PageSurvey client:visible />

  <div class="space-y-3 text-sm md:text-base lg:text-lg">
    <span class="flex items-center space-x-3">
      <Icon
        name="fa:edit"
        class="size-3 text-dark dark:text-light-gray md:size-4 lg:size-5"
      />

      <Link
        href={editUrl}
        class="tracking-tight text-dark-gray hover:text-primary dark:text-light-gray dark:hover:text-primary"
        target="_blank"
        rel="noopener noreferrer"
      >
        Edit this page
      </Link>
    </span>

    <span class="flex items-center space-x-3">
      <Icon
        name="fa:github"
        class="size-3 text-dark dark:text-light-gray md:size-4 lg:size-5"
      />

      <Link
        href={issueUrl}
        class="tracking-tight text-dark-gray hover:text-primary dark:text-light-gray dark:hover:text-primary"
        target="_blank"
        rel="noopener noreferrer"
      >
        File an issue
      </Link>
    </span>
  </div>
</div>