add. Closes #8

components/EmailForm.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="max-w-md mx-auto p-6 rounded-lg shadow-md text-gray-900">
+    <h2 class="text-2xl font-bold mb-6 text-primary text-center">Заполните контактные данные</h2>
+
+    <form @submit.prevent="onSubmit" class="space-y-4">
+      <div>
+        <label for="to" class="block text-sm font-medium text-primary mb-2"> Ваш e-mail: </label>
+        <input
+          id="to"
+          v-model="to"
+          type="email"
+          required
+          placeholder="email@example.com"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
+        />
+      </div>
+
+      <UiButton type="submit" :disabled="isLoading" class="w-[400px]">
+        <span v-if="isLoading">Перехожу...</span>
+        <span v-else>Перейти к оплате</span>
+      </UiButton>
+    </form>
+
+    <div v-if="status" class="mt-4 p-3 rounded-md" :class="statusClass">
+      {{ status }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const mail = useMail()
+
+const to = ref('')
+const status = ref('')
+const isLoading = ref(false)
+
+const statusClass = computed(() => {
+  if (status.value.includes('Ошибка')) {
+    return 'bg-red-100 text-red-700 border border-red-200'
+  }
+  if (status.value.includes('отправлено') || status.value.includes('подписка')) {
+    return 'bg-green-100 text-green-700 border border-green-200'
+  }
+  return 'bg-blue-100 text-blue-700 border border-blue-200'
+})
+
+async function onSubmit() {
+  if (!to.value) {
+    status.value = 'Пожалуйста, введите ваш e-mail'
+    return
+  }
+
+  isLoading.value = true
+  status.value = ''
+
+  try {
+    const emailData = {
+      to: to.value,
+      subject: 'Новая подписка на рассылку книги!',
+      text: `Пользователь с e-mail: ${to.value} подписался на рассылку книги.`,
+    }
+
+    await mail.send(emailData)
+
+    status.value = 'Успешная подписка! Проверьте вашу почту.'
+
+    // Очищаем форму
+    to.value = ''
+  } catch (error) {
+    console.error('Ошибка отправки письма:', error)
+    status.value = `Ошибка отправки: ${error.message || 'Неизвестная ошибка'}`
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>

components/UiButton/UiButton.vue

@@ -2,6 +2,8 @@
   <component
     :is="tag"
     :type="tag === 'button' ? 'button' : ''"
+    :to="path"
+    :href="path"
     class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
     :class="[baseStyle, size]"
     data-ui="ui-button"
@@ -11,36 +13,40 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from "vue";
-import { colorVariants } from "./UiButton.params.js";
+import { toRefs, computed } from 'vue'
+import { colorVariants } from './UiButton.params.js'
 
 const props = defineProps({
   tag: {
     type: String,
-    default: "button",
+    default: 'button',
   },
   variants: {
-    type: String as () => "primary" | "secondary",
-    default: "primary",
+    type: String as () => 'primary' | 'secondary',
+    default: 'primary',
     validator: (value) => {
-      return ["primary", "secondary"].includes(value as string);
+      return ['primary', 'secondary'].includes(value as string)
     },
   },
   size: {
     type: String,
-    default: "font-bold",
+    default: 'font-bold',
   },
-});
+  path: {
+    type: String,
+    default: '',
+  },
+})
 
-const { tag, variants, size } = toRefs(props);
+const { tag, variants, size } = toRefs(props)
 
-const colorClasses: Record<"primary" | "secondary", string[]> = {
+const colorClasses: Record<'primary' | 'secondary', string[]> = {
   primary: colorVariants.primary,
   secondary: colorVariants.secondary,
-};
+}
 
 const baseStyle = computed(() => {
-  const variant = variants.value as "primary" | "secondary";
-  return colorClasses[variant]?.join(" ") || "";
-});
+  const variant = variants.value as 'primary' | 'secondary'
+  return colorClasses[variant]?.join(' ') || ''
+})
 </script>