88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { Building2, Mail } from 'lucide-react';
|
|
import type { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
|
|
import { Input } from '@/components/ui/shared/Input';
|
|
|
|
export type OrganizationDetailsFormValues = {
|
|
organizationName: string;
|
|
organizationEmail: string;
|
|
organizationType: 'CLINIC' | 'LAB';
|
|
};
|
|
|
|
type OrganizationDetailsFieldsProps = {
|
|
register: UseFormRegister<OrganizationDetailsFormValues>;
|
|
errors: FieldErrors<OrganizationDetailsFormValues>;
|
|
organizationType: 'CLINIC' | 'LAB' | undefined;
|
|
setValue: UseFormSetValue<OrganizationDetailsFormValues>;
|
|
};
|
|
|
|
export function OrganizationDetailsFields({
|
|
register,
|
|
errors,
|
|
organizationType,
|
|
setValue,
|
|
}: OrganizationDetailsFieldsProps) {
|
|
const t = useTranslations('auth');
|
|
|
|
return (
|
|
<>
|
|
<Input
|
|
label={t('organizationName')}
|
|
{...register('organizationName')}
|
|
placeholder={t('organizationNamePlaceholder')}
|
|
error={errors.organizationName?.message}
|
|
icon={<Building2 className="h-5 w-5 icon-flat" />}
|
|
/>
|
|
<Input
|
|
label={t('organizationEmail')}
|
|
{...register('organizationEmail')}
|
|
type="email"
|
|
placeholder={t('organizationEmailPlaceholder')}
|
|
error={errors.organizationEmail?.message}
|
|
icon={<Mail className="h-5 w-5 icon-flat" />}
|
|
/>
|
|
<div>
|
|
<label className="block text-sm font-medium text-text-secondary mb-2">
|
|
{t('organizationType')}
|
|
</label>
|
|
<input type="hidden" {...register('organizationType')} />
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setValue('organizationType', 'CLINIC', { shouldValidate: true });
|
|
}}
|
|
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
|
|
organizationType === 'CLINIC'
|
|
? 'border-primary/60 bg-primary-soft text-text-primary'
|
|
: 'border-border text-text-secondary hover:border-border-strong'
|
|
}`}
|
|
>
|
|
<Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
|
|
<span className="text-sm font-medium">{t('dentalClinic')}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setValue('organizationType', 'LAB', { shouldValidate: true });
|
|
}}
|
|
className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${
|
|
organizationType === 'LAB'
|
|
? 'border-primary/60 bg-primary-soft text-text-primary'
|
|
: 'border-border text-text-secondary hover:border-border-strong'
|
|
}`}
|
|
>
|
|
<Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
|
|
<span className="text-sm font-medium">{t('dentalLab')}</span>
|
|
</button>
|
|
</div>
|
|
{errors.organizationType && (
|
|
<p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|