BookUser.vue

<template>
  <section>
    <div
      class="u-flex u-main-space-between u-cross-center"
      style="
        padding: 20px;
        background-color: rgb(219, 26, 90);
        color: white;
        margin-bottom: 20px;
      "
    >
      <h1 class="u-text-center u-font-size-32">Book Me</h1>
      <NuxtLink to="/dashboard" class="u-small" style="padding-right: 30px">Dashboard</NuxtLink>
    </div>
    <div
      class="card u-cross-center u-width-full-line u-max-width-500"
      style="margin: auto"
    >
      <div class="u-flex u-main-space-between u-cross-center">
        <h6 class="heading-level-6 u-text-center">New Guest</h6>
      </div>

      <form
        method="post"
        @submit.prevent=""
        class="form u-margin-block-start-24"
      >
        <ul class="form-list">
          <li class="form-item">
            <label class="label">Full Name</label>
            <div class="input-text-wrapper">
              <input
                type="text"
                class="input-text u-padding-inline-end-56"
                placeholder="Full name"
                name="name"
                v-model="name"
              />
            </div>
          </li>
          <div class="u-flex u-main-space-between u-cross-center">
            <li class="form-item">
              <label class="label">Check-In</label>
              <div class="input-text-wrapper">
                <input type="date" name="date" v-model="date" />
              </div>
            </li>
            <li class="form-item">
              <label class="label">Time</label>
              <div class="input-text-wrapper">
                <select name="time" v-model="time">
                  <option>2pm - 3pm</option>
                  <option>4pm - 5pm</option>
                  <option>6pm - 7pm</option>
                  <option>8pm - 9pm</option>
                </select>
              </div>
            </li>
          </div>
          <li class="form-item">
            <label class="label">Message</label>
            <div class="input-text-wrapper">
              <textarea
                class="input-text"
                placeholder="Type here..."
                name="message"
                v-model="message"
                style="height: 80px"
              ></textarea>
            </div>
          </li>
        </ul>

        <div class="form-footer">
          <div class="u-flex u-main-end u-gap-12">
            <button class="button" type="submit">
              Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </section>
</template>
<script lang="ts">
import "@appwrite.io/pink"; // optionally, add icons
import "@appwrite.io/pink-icons";

export default {
  data() {
    return {
      name: "",
      message: "",
      date: "",
      time: "",
    };
  } 
};
</script>