FMHYedit/.vitepress/theme/components/Feedback.vue

<script setup lang="ts">
import { reactive, ref } from "vue";

interface Feedback {
  message: string;
  feedbackType?: string;
  contactEmail?: string;
  anonymous: boolean;
}

const loading = ref(false);
const error = ref<unknown>(null);
const success = ref(false);

const feedback = reactive<Feedback>({ message: "", anonymous: false, contactEmail: "" });

const feedbackOptions = [
  { label: "🐞 Bug", value: "bug" },
  {
    label: "♻️ Suggestion",
    value: "suggestion",
  },
  { label: "📂 Other", value: "other" },
  {
    label: "❤️ Appreciation",
    value: "appreciate",
  },
];

function getFeedbackOption(value: string) {
  return feedbackOptions.find((option) => option.value === value);
}

async function handleSubmit(type?: string) {
  if (type) feedback.feedbackType = type as string;
  loading.value = true;

  const body: Feedback = {
    message: feedback.message,
    feedbackType: feedback.feedbackType,
    anonymous: feedback.anonymous,
    contactEmail: feedback.contactEmail,
  };

  // TODO: fix this horror?
  try {
    const response = await fetch("https://feedback.tasky.workers.dev", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    });

    const data = await response.json();

    if (data.error) {
      error.value = data.error;
      return;
    }
    if (data.status === "success") {
      success.value = true;
    }
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="wrapper">
    <Transition name="fade" mode="out-in">
      <div v-if="!feedback.feedbackType" class="step">
        <div>
          <div>
            <p class="heading">Feedback</p>
          </div>
        </div>
        <div class="button-container">
          <button
            v-for="item in feedbackOptions"
            :key="item.value"
            class="btn"
            @click="handleSubmit(item.value)">
            <span>{{ item.label }}</span>
          </button>
        </div>
      </div>
      <div v-else-if="feedback.feedbackType && !success" class="step">
        <div>
          <p class="desc">The wiki is...</p>
          <div>
            <span>{{ getFeedbackOption(feedback.feedbackType)?.label }}</span>
            <button
              style="margin-left: 0.5rem"
              class="btn"
              @click="feedback.feedbackType = undefined">
              <span class="i-carbon-close-large">close</span>
            </button>
          </div>
        </div>
        <textarea v-model="feedback.message" autofocus class="input" />
        <p class="desc">Contacts, so we can get back to you. (Optional)</p>
        <textarea v-model="feedback.contactEmail" class="contact-input" />
        <button
          class="btn btn-primary"
          :disabled="feedback.message.length > 10"
          @click="handleSubmit()">
          Submit
        </button>
      </div>
      <div v-else class="step">
        <p class="heading">Thanks for your feedback!</p>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.step > * + * {
  margin-top: 1rem;
}

.btn {
  border: 1px solid var(--vp-c-divider);
  background-color: var(--vp-c-bg);
  border-radius: 8px;
  transition:
    border-color 0.25s,
    background-color 0.25s;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0.375rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
}

.btn:hover {
  border-color: var(--vp-c-brand);
}

.btn-primary {
  color: #fff;
  background-color: var(--vp-c-brand);
  border-color: var(--vp-c-brand);
}

.btn-primary:hover {
  background-color: var(--vp-c-brand-darker);
  border-color: var(--vp-c-brand-darker);
}

.heading {
  font-size: 1.2rem;
  font-weight: 700;
}

.button-container {
  display: grid;
  grid-gap: 0.5rem;
}

.wrapper {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-alt);
}

.input {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.375rem 0.75rem;
}

.contact-input {
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.375rem 0.75rem;
}

.desc {
  display: block;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>