Document inputs

'use client';

import {
  BankAccountInput,
  CarPlateInput,
  Field,
  InnInput,
  PassportInput,
  PinflInput,
} from '@akhatmirzo/ui';
import { useState } from 'react';

export default function DocumentInputsOverview() {
  const [pinfl, setPinfl] = useState('');
  const [passport, setPassport] = useState('');
  const [inn, setInn] = useState('');
  const [plate, setPlate] = useState('');
  const [account, setAccount] = useState('');

  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="JShShIR" description={`Qiymat: "${pinfl}"`}>
        <PinflInput value={pinfl} onValueChange={setPinfl} />
      </Field>
      <Field label="Pasport yoki ID karta" description={`Qiymat: "${passport}"`}>
        <PassportInput value={passport} onValueChange={setPassport} />
      </Field>
      <Field label="STIR" description={`Qiymat: "${inn}"`}>
        <InnInput value={inn} onValueChange={setInn} />
      </Field>
      <Field label="Avtomobil raqami" description={`Qiymat: "${plate}"`}>
        <CarPlateInput value={plate} onValueChange={setPlate} />
      </Field>
      <Field label="Hisob raqami" description={`Qiymat: "${account}"`} className="sm:col-span-2">
        <BankAccountInput value={account} onValueChange={setAccount} />
      </Field>
    </div>
  );
}

'use client';

import { Field, InnInput, PassportInput } from '@akhatmirzo/ui';

export default function DocumentValidation() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="STIR" description="0 bilan boshlanmaydi — darhol xato">
        <InnInput defaultValue="012345678" />
      </Field>
      <Field label="Pasport" description="validate={false} — tekshiruvsiz">
        <PassportInput defaultValue="AB1234567" validate={false} />
      </Field>
    </div>
  );
}

'use client';

import { Field, PinflInput, type PinflInputDetails } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function PinflDemo() {
  const [details, setDetails] = useState<PinflInputDetails | null>(null);

  const info =
    details?.valid && details.birthDate
      ? `${details.gender === 'male' ? 'Erkak' : 'Ayol'}, tugʻilgan: ${details.birthDate.toLocaleDateString('uz-UZ')}`
      : undefined;

  return (
    <div className="w-full max-w-sm">
      <Field
        label="JShShIR"
        description={info ?? '14 raqam — pasportdagi shaxsiy raqam'}
        error={details && !details.valid ? 'JShShIR notoʻgʻri' : undefined}
      >
        <PinflInput
          onValueChange={(_, d) => {
            if (!d.complete) setDetails(null);
          }}
          onDetails={setDetails}
        />
      </Field>
    </div>
  );
}

'use client';

import { CarPlateInput, Field, type CarPlateInputDetails } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function CarPlateDemo() {
  const [details, setDetails] = useState<CarPlateInputDetails | null>(null);

  const type =
    details?.type === 'legal' ? 'yuridik shaxs' : details?.type ? 'jismoniy shaxs' : null;
  const description = [details?.region?.name, type].filter(Boolean).join(' · ');

  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="Jismoniy shaxs" description={description || '01 A 123 BC'}>
        <CarPlateInput defaultValue="01A123BC" onDetails={setDetails} />
      </Field>
      <Field label="Yuridik shaxs" description="01 123 ABC">
        <CarPlateInput defaultValue="30123ABC" />
      </Field>
    </div>
  );
}