102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
interface RequestQuoteFormProps {
|
|
productName: string;
|
|
}
|
|
|
|
export default function RequestQuoteForm({ productName }: RequestQuoteFormProps) {
|
|
const [email, setEmail] = useState('');
|
|
const [request, setRequest] = useState('');
|
|
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setStatus('submitting');
|
|
|
|
// Simulate API call
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
|
|
// Here you would typically send the data to your backend
|
|
console.log('Form submitted:', { productName, email, request });
|
|
|
|
setStatus('success');
|
|
setEmail('');
|
|
setRequest('');
|
|
};
|
|
|
|
if (status === 'success') {
|
|
return (
|
|
<div className="bg-green-50 border border-green-200 text-green-800 p-6 rounded-lg">
|
|
<h3 className="text-lg font-semibold mb-2">Request Sent!</h3>
|
|
<p>Thank you for your interest in {productName}. We will get back to you shortly.</p>
|
|
<button
|
|
onClick={() => setStatus('idle')}
|
|
className="mt-4 text-sm font-medium underline hover:text-green-900"
|
|
>
|
|
Send another request
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-neutral-light p-6 rounded-lg border border-neutral-dark">
|
|
<h3 className="text-xl font-semibold mb-4 text-primary-dark">Request Cable</h3>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="product" className="block text-sm font-medium text-text-secondary mb-1">
|
|
Product
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="product"
|
|
value={productName}
|
|
disabled
|
|
className="w-full px-3 py-2 bg-neutral border border-neutral-dark rounded text-text-secondary cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-text-primary mb-1">
|
|
Email <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-3 py-2 bg-white border border-neutral-dark rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="your@email.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="request" className="block text-sm font-medium text-text-primary mb-1">
|
|
Request <span className="text-red-500">*</span>
|
|
</label>
|
|
<textarea
|
|
id="request"
|
|
required
|
|
rows={4}
|
|
value={request}
|
|
onChange={(e) => setRequest(e.target.value)}
|
|
className="w-full px-3 py-2 bg-white border border-neutral-dark rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Describe your request, e.g. the cross section etc."
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={status === 'submitting'}
|
|
className="w-full bg-primary text-white font-medium py-2 px-4 rounded hover:bg-primary-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{status === 'submitting' ? 'Sending...' : 'Request Cable'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|