lms/resources/js/components/subscribe-input.tsx
2025-12-15 12:26:23 +01:00

47 lines
1.4 KiB
TypeScript

import { useLang } from '@/hooks/use-lang';
import { cn } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import ButtonGradientPrimary from './button-gradient-primary';
import InputError from './input-error';
interface SubscribeInputProps {
className?: string;
buttonText?: string;
}
const SubscribeInput = ({ className, buttonText }: SubscribeInputProps) => {
const { input } = useLang();
const { data, setData, post, errors } = useForm({
email: '',
});
const submit: FormEventHandler = (e) => {
e.preventDefault();
post(route('subscribes.store'));
};
return (
<form onSubmit={submit} className={cn('relative z-10', className)}>
<div className="bg-background text-primary flex items-center justify-between gap-2 rounded-md border border-gray-400">
<input
type="email"
name="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
className="h-[50px] w-full px-4 focus:outline-0"
placeholder={input.email_placeholder}
/>
<ButtonGradientPrimary type="submit" shadow={false} className="mr-1">
{buttonText || 'Subscribe'}
</ButtonGradientPrimary>
</div>
<InputError message={errors.email} />
</form>
);
};
export default SubscribeInput;