@yoamigo.com/cli 0.1.24 → 0.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,35 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
1
2
|
import { YaText } from '@yoamigo.com/core'
|
|
3
|
+
import { submitContactForm, type ContactFormData } from '@yoamigo.com/core/lib'
|
|
2
4
|
|
|
3
5
|
export default function ContactPage() {
|
|
6
|
+
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
|
|
7
|
+
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
8
|
+
const [isSubmitted, setIsSubmitted] = useState(false)
|
|
9
|
+
const [error, setError] = useState<string | null>(null)
|
|
10
|
+
|
|
11
|
+
const handleSubmit = async (e: React.FormEvent) => {
|
|
12
|
+
e.preventDefault()
|
|
13
|
+
setIsSubmitting(true)
|
|
14
|
+
setError(null)
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
const data: ContactFormData = {
|
|
18
|
+
name: formData.name,
|
|
19
|
+
email: formData.email,
|
|
20
|
+
message: formData.message,
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
await submitContactForm(data)
|
|
24
|
+
setIsSubmitted(true)
|
|
25
|
+
setFormData({ name: '', email: '', message: '' })
|
|
26
|
+
} catch (err) {
|
|
27
|
+
setError(err instanceof Error ? err.message : 'Failed to submit form')
|
|
28
|
+
} finally {
|
|
29
|
+
setIsSubmitting(false)
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
4
33
|
return (
|
|
5
34
|
<div>
|
|
6
35
|
{/* Hero Section */}
|
|
@@ -21,70 +50,184 @@ export default function ContactPage() {
|
|
|
21
50
|
</div>
|
|
22
51
|
</section>
|
|
23
52
|
|
|
24
|
-
{/* Contact Info Section */}
|
|
53
|
+
{/* Contact Form & Info Section */}
|
|
25
54
|
<section className="py-16">
|
|
26
55
|
<div className="container mx-auto px-4">
|
|
27
|
-
<div className="max-w-
|
|
28
|
-
<div className="grid md:grid-cols-2 gap-
|
|
29
|
-
{/*
|
|
30
|
-
<div
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
</svg>
|
|
35
|
-
</div>
|
|
36
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
37
|
-
<YaText fieldId="contact.emailTitle" as="span">
|
|
38
|
-
Email
|
|
56
|
+
<div className="max-w-4xl mx-auto">
|
|
57
|
+
<div className="grid md:grid-cols-2 gap-12">
|
|
58
|
+
{/* Contact Form */}
|
|
59
|
+
<div>
|
|
60
|
+
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
61
|
+
<YaText fieldId="contact.formTitle" as="span">
|
|
62
|
+
Send us a message
|
|
39
63
|
</YaText>
|
|
40
|
-
</
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
64
|
+
</h2>
|
|
65
|
+
|
|
66
|
+
{isSubmitted ? (
|
|
67
|
+
<div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
|
|
68
|
+
<div className="text-green-600 text-4xl mb-4">✓</div>
|
|
69
|
+
<h3 className="text-lg font-semibold text-green-800 mb-2">
|
|
70
|
+
<YaText fieldId="contact.successTitle" as="span">
|
|
71
|
+
Message Sent!
|
|
72
|
+
</YaText>
|
|
73
|
+
</h3>
|
|
74
|
+
<p className="text-green-700">
|
|
75
|
+
<YaText fieldId="contact.successMessage" as="span">
|
|
76
|
+
Thanks for reaching out. We'll get back to you soon.
|
|
77
|
+
</YaText>
|
|
78
|
+
</p>
|
|
79
|
+
<button
|
|
80
|
+
onClick={() => setIsSubmitted(false)}
|
|
81
|
+
className="mt-4 text-sm font-medium text-blue-600 hover:underline"
|
|
82
|
+
>
|
|
83
|
+
Send another message
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
86
|
+
) : (
|
|
87
|
+
<form onSubmit={handleSubmit} className="space-y-6">
|
|
88
|
+
<div>
|
|
89
|
+
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
|
90
|
+
<YaText fieldId="contact.nameLabel" as="span">
|
|
91
|
+
Name
|
|
92
|
+
</YaText>
|
|
93
|
+
</label>
|
|
94
|
+
<input
|
|
95
|
+
type="text"
|
|
96
|
+
id="name"
|
|
97
|
+
name="name"
|
|
98
|
+
required
|
|
99
|
+
value={formData.name}
|
|
100
|
+
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
101
|
+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
102
|
+
placeholder="Your name"
|
|
103
|
+
/>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div>
|
|
107
|
+
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
|
108
|
+
<YaText fieldId="contact.emailLabel" as="span">
|
|
109
|
+
Email
|
|
110
|
+
</YaText>
|
|
111
|
+
</label>
|
|
112
|
+
<input
|
|
113
|
+
type="email"
|
|
114
|
+
id="email"
|
|
115
|
+
name="email"
|
|
116
|
+
required
|
|
117
|
+
value={formData.email}
|
|
118
|
+
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
119
|
+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
120
|
+
placeholder="your@email.com"
|
|
121
|
+
/>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div>
|
|
125
|
+
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
|
126
|
+
<YaText fieldId="contact.messageLabel" as="span">
|
|
127
|
+
Message
|
|
128
|
+
</YaText>
|
|
129
|
+
</label>
|
|
130
|
+
<textarea
|
|
131
|
+
id="message"
|
|
132
|
+
name="message"
|
|
133
|
+
required
|
|
134
|
+
rows={5}
|
|
135
|
+
value={formData.message}
|
|
136
|
+
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
|
137
|
+
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
138
|
+
placeholder="How can we help you?"
|
|
139
|
+
/>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
{error && (
|
|
143
|
+
<div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
|
|
144
|
+
{error}
|
|
145
|
+
</div>
|
|
146
|
+
)}
|
|
147
|
+
|
|
148
|
+
<button
|
|
149
|
+
type="submit"
|
|
150
|
+
disabled={isSubmitting}
|
|
151
|
+
className="w-full bg-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
|
152
|
+
>
|
|
153
|
+
{isSubmitting ? 'Sending...' : (
|
|
154
|
+
<YaText fieldId="contact.submitText" as="span">
|
|
155
|
+
Send Message
|
|
156
|
+
</YaText>
|
|
157
|
+
)}
|
|
158
|
+
</button>
|
|
159
|
+
</form>
|
|
160
|
+
)}
|
|
46
161
|
</div>
|
|
47
162
|
|
|
48
|
-
{/*
|
|
49
|
-
<div className="
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
</svg>
|
|
54
|
-
</div>
|
|
55
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
56
|
-
<YaText fieldId="contact.phoneTitle" as="span">
|
|
57
|
-
Phone
|
|
58
|
-
</YaText>
|
|
59
|
-
</h3>
|
|
60
|
-
<p className="text-gray-600">
|
|
61
|
-
<YaText fieldId="contact.phoneValue" as="span">
|
|
62
|
-
(555) 123-4567
|
|
163
|
+
{/* Contact Info */}
|
|
164
|
+
<div className="space-y-6">
|
|
165
|
+
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
166
|
+
<YaText fieldId="contact.infoTitle" as="span">
|
|
167
|
+
Contact Information
|
|
63
168
|
</YaText>
|
|
64
|
-
</
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
169
|
+
</h2>
|
|
67
170
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
171
|
+
{/* Email */}
|
|
172
|
+
<div className="bg-white p-6 rounded-lg border border-gray-200">
|
|
173
|
+
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
174
|
+
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
175
|
+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
176
|
+
</svg>
|
|
177
|
+
</div>
|
|
178
|
+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
179
|
+
<YaText fieldId="contact.emailTitle" as="span">
|
|
180
|
+
Email
|
|
181
|
+
</YaText>
|
|
182
|
+
</h3>
|
|
183
|
+
<p className="text-gray-600">
|
|
184
|
+
<YaText fieldId="contact.emailValue" as="span">
|
|
185
|
+
hello@example.com
|
|
186
|
+
</YaText>
|
|
187
|
+
</p>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
{/* Phone */}
|
|
191
|
+
<div className="bg-white p-6 rounded-lg border border-gray-200">
|
|
192
|
+
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
193
|
+
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
194
|
+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
195
|
+
</svg>
|
|
196
|
+
</div>
|
|
197
|
+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
198
|
+
<YaText fieldId="contact.phoneTitle" as="span">
|
|
199
|
+
Phone
|
|
200
|
+
</YaText>
|
|
201
|
+
</h3>
|
|
202
|
+
<p className="text-gray-600">
|
|
203
|
+
<YaText fieldId="contact.phoneValue" as="span">
|
|
204
|
+
(555) 123-4567
|
|
205
|
+
</YaText>
|
|
206
|
+
</p>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
{/* Address */}
|
|
210
|
+
<div className="bg-white p-6 rounded-lg border border-gray-200">
|
|
211
|
+
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
212
|
+
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
213
|
+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
214
|
+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
215
|
+
</svg>
|
|
216
|
+
</div>
|
|
217
|
+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
218
|
+
<YaText fieldId="contact.addressTitle" as="span">
|
|
219
|
+
Address
|
|
220
|
+
</YaText>
|
|
221
|
+
</h3>
|
|
222
|
+
<p className="text-gray-600">
|
|
223
|
+
<YaText fieldId="contact.addressValue" as="span">
|
|
224
|
+
123 Main Street, Suite 100
|
|
225
|
+
<br />
|
|
226
|
+
San Francisco, CA 94102
|
|
227
|
+
</YaText>
|
|
228
|
+
</p>
|
|
229
|
+
</div>
|
|
75
230
|
</div>
|
|
76
|
-
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
|
77
|
-
<YaText fieldId="contact.addressTitle" as="span">
|
|
78
|
-
Address
|
|
79
|
-
</YaText>
|
|
80
|
-
</h3>
|
|
81
|
-
<p className="text-gray-600">
|
|
82
|
-
<YaText fieldId="contact.addressValue" as="span">
|
|
83
|
-
123 Main Street, Suite 100
|
|
84
|
-
<br />
|
|
85
|
-
San Francisco, CA 94102
|
|
86
|
-
</YaText>
|
|
87
|
-
</p>
|
|
88
231
|
</div>
|
|
89
232
|
</div>
|
|
90
233
|
</div>
|