Textarea

'use client';

import { Textarea } from '@akhatmirzo/ui';

export default function TextareaBasic() {
  return (
    <div className="w-full max-w-md">
      <Textarea placeholder="Buyurtma haqida izoh qoldiring" aria-label="Izoh" />
    </div>
  );
}

'use client';

import { Textarea } from '@akhatmirzo/ui';

export default function TextareaAutoResize() {
  return (
    <div className="w-full max-w-md">
      <Textarea
        autoResize
        minRows={2}
        maxRows={6}
        placeholder="Yozib ko'ring — maydon matn bilan birga o'sadi"
        aria-label="Xabar"
      />
    </div>
  );
}

'use client';

import { Textarea } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function TextareaCount() {
  const [bio, setBio] = useState(
    'Frontend dasturchi, Toshkent. React va TypeScript bilan ishlayman.',
  );

  return (
    <div className="w-full max-w-md">
      <Textarea
        showCount
        maxLength={120}
        value={bio}
        onChange={(e) => setBio(e.target.value)}
        aria-label="O'zingiz haqingizda"
      />
    </div>
  );
}

'use client';

import { Textarea } from '@akhatmirzo/ui';

export default function TextareaStates() {
  return (
    <div className="grid w-full max-w-lg grid-cols-1 gap-3 sm:grid-cols-2">
      <Textarea minRows={2} invalid defaultValue="Juda qisqa" aria-label="Xato" />
      <Textarea minRows={2} disabled defaultValue="O'chirilgan" aria-label="O'chirilgan" />
      <Textarea minRows={2} readOnly defaultValue="Faqat o'qish uchun" aria-label="Faqat o'qish" />
      <Textarea minRows={2} size="sm" placeholder="Kichik o'lcham" aria-label="Kichik" />
    </div>
  );
}

'use client';

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

export default function TextareaWithField() {
  return (
    <div className="w-full max-w-md">
      <Field label="Izoh" required description="Kuryer uchun qo'shimcha ma'lumot">
        <Textarea
          autoResize
          showCount
          maxLength={300}
          placeholder="Masalan: 3-podyezd, domofon ishlamaydi"
        />
      </Field>
    </div>
  );
}