124 lines
4.1 KiB
TypeScript
124 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Heading, Text } from '@/components/ui/Typography';
|
|
import { useState } from 'react';
|
|
|
|
interface NewsletterProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
buttonText?: string;
|
|
disclaimer?: string;
|
|
}
|
|
|
|
export function Newsletter({
|
|
title = 'Join our newsletter',
|
|
subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
buttonText = 'Sign Up',
|
|
disclaimer = 'By clicking Sign Up you\'re confirming that you agree with our Terms and Conditions.'
|
|
}: NewsletterProps) {
|
|
// Form state
|
|
const [email, setEmail] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
|
|
// Handle input change
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setEmail(e.target.value);
|
|
if (error) setError('');
|
|
};
|
|
|
|
// Validate email
|
|
const validateEmail = () => {
|
|
if (!email.trim()) {
|
|
setError('Molimo unesite vašu email adresu');
|
|
return false;
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
setError('Molimo unesite ispravnu email adresu');
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (validateEmail()) {
|
|
setIsSubmitting(true);
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
setIsSubmitting(false);
|
|
setIsSubmitted(true);
|
|
setEmail('');
|
|
|
|
// Reset success message after 5 seconds
|
|
setTimeout(() => {
|
|
setIsSubmitted(false);
|
|
}, 5000);
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex flex-col md:flex-row items-start justify-between gap-8">
|
|
<div className="md:w-1/2">
|
|
<Heading level={3} className="mb-4">{title}</Heading>
|
|
<Text size="lg">{subtitle}</Text>
|
|
</div>
|
|
|
|
<div className="md:w-1/2 w-full">
|
|
{isSubmitted ? (
|
|
<div className="p-4 bg-green-50 border border-green-200 rounded-md animate-fade-in">
|
|
<div className="flex items-center mb-2">
|
|
<div className="mr-3 bg-green-500 rounded-full p-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<Text className="text-green-700 font-medium">Uspješno ste se pretplatili!</Text>
|
|
</div>
|
|
<Text className="text-green-600">Hvala na prijavi. Uskoro ćete primiti našu prvu newsletter poruku.</Text>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="w-full">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
value={email}
|
|
onChange={handleChange}
|
|
className={`w-full p-3 border ${error ? 'border-red-500' : 'border-gray-300'} rounded`}
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<Text size="sm" className="mt-1 text-red-500">{error}</Text>
|
|
)}
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
className="bg-black text-white px-6 w-[120px] h-[48px]"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? 'Sending...' : buttonText}
|
|
</Button>
|
|
</div>
|
|
|
|
{!isSubmitted && (
|
|
<Text className="mt-4 text-gray-500 text-[12px] leading-[14.4px]">
|
|
{disclaimer}
|
|
</Text>
|
|
)}
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|