This commit is contained in:
taskylizard
2023-11-14 22:48:52 +05:30
parent fbebbefb80
commit ffedc34675
11 changed files with 97 additions and 69 deletions

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute } from "vitepress";
import type { FeedbackType } from "../../types/Feedback";
import { fetcher } from "itty-fetcher";
import type { FeedbackType } from "../../types/Feedback";
const loading = ref<boolean>(false);
const error = ref<unknown>(null);
@@ -57,8 +57,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
if (data.status === "success") {
success.value = true;
}
} catch (err) {
error.value = err;
} catch (error_) {
error.value = error_;
} finally {
loading.value = false;
}

View File

@@ -10,9 +10,7 @@ import {
} from "@headlessui/vue";
const isOpen = ref(true);
interface ILogger {
}
interface ILogger {}
const feedbackOptions = [
{
@@ -36,20 +34,36 @@ function openModal() {
</script>
<template>
<button type="button" class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="openModal" />
<button
type="button"
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
@click="openModal"
/>
<TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" @close="closeModal" class="relative z-10">
<TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
<Dialog as="div" class="relative z-10" @close="closeModal">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
leave-to="opacity-0">
<div class="fixed inset-0 bg-black/25" />
</TransitionChild>
<div class="fixed inset-0 overflow-y-auto">
<div class="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-95"
>
<DialogPanel
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all">
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-text">
@@ -58,25 +72,30 @@ function openModal() {
<div class="mt-2">
<div class="grid gap-[0.5rem]">
<button v-for="item in feedbackOptions" :key="item.value"
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
<button
v-for="item in feedbackOptions"
:key="item.value"
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
>
<span>{{ item.label }}</span>
</button>
</div>
</div>
<div class="mt-2">
<div>
<label for="feedback-input-text" class="field-label">Feedback*</label>
<div class="mt-2">
<div>
<label for="feedback-input-text" class="field-label">Feedback*</label>
<textarea id="feedback-input-text" placeholder="meow" rows="5" />
</div>
<textarea id="feedback-input-text" placeholder="meow" rows="5" />
</div>
</div>
<div class="mt-4">
<button type="button"
<button
type="button"
class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
@click="closeModal">
@click="closeModal"
>
Close
</button>
</div>

View File

@@ -7,7 +7,7 @@ defineProps<{
<template>
<div class="input-field">
<div class="input-label" v-if="label">
<div v-if="label" class="input-label">
<label :for="id" class="pane-label">
{{ label }}
</label>

View File

@@ -10,9 +10,9 @@ import ToggleStarred from "./ToggleStarred.vue";
<div class="card-header">
<div class="card-title">Emoji Legend</div>
</div>
<Field icon="i-twemoji-star">Recommendations</Field>
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
<Field icon="i-twemoji-repeat-button">Storage Links</Field>
<Field icon="i-twemoji-star"> Recommendations </Field>
<Field icon="i-twemoji-globe-with-meridians"> Indexes </Field>
<Field icon="i-twemoji-repeat-button"> Storage Links </Field>
<div class="card-header">
<div class="card-title">Options</div>
</div>