_feedback_form.liquid

Baklib

发布于:2024-07-07

<div id="feedback_form">
  {% form_tag 'feedback', page: page %}
    <div class="space-y-5 p-4">
      <div class="text-center">{{ site.plugins.feedback.useful_label }}</div>
      <div
        class="flex items-center justify-center space-x-5" x-data="{ selected: '{{ page.last_feedback_emoji }}' }" >
        {% if site.plugins.feedback.message_enabled %}
          <div class="flex flex-wrap items-center justify-center space-x-5">
            {% for useful_type in site.plugins.feedback.useful_types %}
              <label
                class="flex items-center p-1 space-x-1 border rounded"
                :class="{ 'bg-gray-200 dark:bg-gray-700': selected === '{{ useful_type.emoji }}' }"
                @click="selected = '{{ useful_type.emoji }}'">
                <input
                  type="radio"
                  name="feedback[useful_type]"
                  value="{{ useful_type.emoji }}"
                  x-model="selected"
                  class="hidden">
                <div>{{ useful_type.emoji }}</div>
                <div>{{ useful_type.label }}</div>
              </label>
            {% endfor %}
          </div>
        {% else %}
          {% for useful_type in site.plugins.feedback.useful_types %}
            <button name="feedback[useful_type]" value="{{ useful_type.emoji }}" :class="{ 'bg-gray-200': selected === '{{ useful_type.emoji }}' }">{{ useful_type.emoji }} {{ useful_type.label }}</button>
          {% endfor %}
        {% endif %}
      </div>
      {%# 反馈内容 %}
      {% if site.plugins.feedback.message_enabled %}
        {% if site.plugins.feedback.message_required %}
          <div class="text-left">* 反馈内容</div>
        {% endif %}
        <div class="mt-5">
          <textarea
            class="w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-gray-700 dark:hover:border-navy-400 dark:focus:border-accent max-h-20"
            name="feedback[message]"
            placeholder="{{ 'feedback.input_placeholder' | t }}"></textarea>
          {%# 提交按钮 %}
          <div class="flex justify-end mt-5">
            <input
              type="submit"
              class="inline-flex items-center justify-center px-5 py-2 tracking-wide text-center border rounded-lg cursor-pointer text-slate-900 dark:text-white text-slate-800 focus:outline-none disabled:pointer-events-none"
              value="{{ 'buttons.submit' | t }}" />
          </div>
        </div>
      {% endif %}

    </div>
  {% endform_tag %}
</div>

提交反馈