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

199 lines
4.3 KiB
Vue
Raw Normal View History

2023-11-12 16:42:57 +00:00
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vitepress";
2023-11-19 08:57:14 +00:00
import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback";
2023-11-12 16:42:57 +00:00
const loading = ref<boolean>(false);
const error = ref<unknown>(null);
const success = ref<boolean>(false);
const router = useRouter();
2023-11-12 16:42:57 +00:00
2023-11-19 21:35:33 +00:00
const feedback = reactive<FeedbackType>({ message: "" });
2023-11-12 16:42:57 +00:00
async function handleSubmit(type?: FeedbackType["type"]) {
if (type) feedback.type = type;
loading.value = true;
const body: FeedbackType = {
message: feedback.message,
type: feedback.type,
page: router.route.path,
2023-11-12 16:42:57 +00:00
};
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;
}
2023-11-19 08:57:14 +00:00
if (data.status === "ok") {
2023-11-12 16:42:57 +00:00
success.value = true;
}
2023-11-14 17:18:52 +00:00
} catch (error_) {
error.value = error_;
2023-11-12 16:42:57 +00:00
} finally {
loading.value = false;
}
}
</script>
<template>
<div class="wrapper">
<Transition name="fade" mode="out-in">
<div v-if="!feedback.type" class="step">
<div>
2023-11-14 15:10:49 +00:00
<div>
2023-11-12 16:42:57 +00:00
<p class="heading">Feedback</p>
</div>
</div>
<div class="button-container">
2023-12-15 20:49:17 +00:00
<button
v-for="item in feedbackOptions"
:key="item.value"
class="btn"
2023-11-12 16:42:57 +00:00
@click="handleSubmit(item.value as FeedbackType['type'])">
<span>{{ item.label }}</span>
2023-11-14 15:10:49 +00:00
</button>
2023-11-12 16:42:57 +00:00
</div>
</div>
2023-11-14 15:10:49 +00:00
<div v-else-if="feedback.type && !success" class="step">
2023-11-12 16:42:57 +00:00
<div>
<p class="desc">Page: {{ router.route.path }}</p>
2023-11-12 16:42:57 +00:00
<div>
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
<button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
<span class="i-carbon-close-large">close</span>
</button>
2023-11-14 15:10:49 +00:00
</div>
2023-11-12 16:42:57 +00:00
</div>
2023-12-15 20:49:17 +00:00
<textarea
v-model="feedback.message"
autofocus
class="input"
placeholder="What a lovely wiki!" />
2023-11-19 21:35:33 +00:00
<p class="desc mb-2">
Join our
2023-12-15 20:49:17 +00:00
<a class="text-primary font-semibold text-underline" href="https://discord.gg/Stz6y6NgNg"
>Discord</a
>
2023-11-19 21:35:33 +00:00
if you'd like a response to your feedback.
</p>
2023-12-15 20:49:17 +00:00
<button
type="submit"
class="btn btn-primary"
:disabled="feedback.message.length < 5 || feedback.message.length > 1000"
@click="handleSubmit()">
2023-11-12 16:42:57 +00:00
Submit
</button>
</div>
<div v-else class="step">
<p class="heading">Thanks for your feedback!</p>
</div>
</Transition>
</div>
</template>
<style scoped>
2023-12-15 20:49:17 +00:00
.step > * + * {
2023-11-12 16:42:57 +00:00
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>