Formatting

'use client';

import { formatMoney, formatNumber, type MoneyCurrency } from '@akhatmirzo/core';
import { Button, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const CURRENCIES: MoneyCurrency[] = ["so'm", 'UZS', false];

export default function CoreMoney() {
  const [raw, setRaw] = useState('1250000.5');
  const [currency, setCurrency] = useState<MoneyCurrency>("so'm");
  const n = Number(raw.replace(',', '.').replace(/\s/g, ''));

  const rows = [
    { call: 'formatNumber(n)', value: formatNumber(n) },
    { call: 'formatNumber(n, { decimals: 2 })', value: formatNumber(n, { decimals: 2 }) },
    { call: 'formatMoney(n, { currency })', value: formatMoney(n, { currency }) },
  ];

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Son">
        <Input value={raw} onChange={(e) => setRaw(e.target.value)} inputMode="decimal" />
      </Field>
      <div className="flex flex-wrap items-center gap-2">
        {CURRENCIES.map((c) => (
          <Button
            key={String(c)}
            size="sm"
            variant={currency === c ? 'primary' : 'outline'}
            onClick={() => setCurrency(c)}
          >
            {c === false ? 'false' : c}
          </Button>
        ))}
      </div>
      <dl className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {rows.map((row) => (
          <div key={row.call} className="flex flex-wrap justify-between gap-x-4 gap-y-1 px-3 py-2">
            <dt className="font-mono text-xs text-text-muted">{row.call}</dt>
            <dd className="font-mono font-medium text-text tabular-nums">{row.value || "''"}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

'use client';

import { formatCardNumber, formatPhone } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const digitsOf = (s: string) => s.replace(/\D/g, '');

export default function CorePhoneCard() {
  const [phone, setPhone] = useState('90123');
  const [card, setCard] = useState('8600 1234');

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Telefon" description={`formatPhone: ${formatPhone(phone) || '—'}`}>
        <Input
          prefix="+998"
          value={formatPhone(phone, 'national')}
          onChange={(e) => setPhone(digitsOf(e.target.value).slice(0, 9))}
          inputMode="tel"
          placeholder="(90) 123-45-67"
        />
      </Field>
      <Field label="Karta raqami" description={`Toza qiymat: ${digitsOf(card) || '—'}`}>
        <Input
          value={card}
          onChange={(e) => setCard(formatCardNumber(digitsOf(e.target.value).slice(0, 16)))}
          inputMode="numeric"
          placeholder="0000 0000 0000 0000"
        />
      </Field>
    </div>
  );
}

'use client';

import { formatDate, parseDate } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const PATTERNS = ['dd.MM.yyyy', 'd MMMM yyyy, EEEE', 'd MMM, EEE', 'EEEE, d MMMM [soat] HH:mm'];
const DATE = new Date(2026, 9, 21, 14, 30);

export default function CoreDate() {
  const [pattern, setPattern] = useState('d MMMM yyyy, EEEE');
  const [input, setInput] = useState('31.02.2026');
  const parsed = parseDate(input);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field
        label="Shablon"
        description={`formatDate(sana, shablon) → ${formatDate(DATE, pattern)}`}
      >
        <Input value={pattern} onChange={(e) => setPattern(e.target.value)} />
      </Field>
      <div className="flex flex-wrap gap-2">
        {PATTERNS.map((p) => (
          <button key={p} type="button" onClick={() => setPattern(p)} className="cursor-pointer">
            <Badge variant="outline">{p}</Badge>
          </button>
        ))}
      </div>
      <Field
        label="parseDate (dd.MM.yyyy)"
        description={parsed ? formatDate(parsed, 'EEEE, d MMMM yyyy') : "null — bunday sana yo'q"}
      >
        <Input value={input} onChange={(e) => setInput(e.target.value)} invalid={!parsed} />
      </Field>
    </div>
  );
}

'use client';

import { timeAgo } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const MINUTE = 60_000;
const NOW = new Date(2026, 9, 21, 12, 0);
const OFFSETS = [5, 180, 1440, 4320, 20160, 136800, -120, -1440];

export default function CoreTimeAgo() {
  const [minutes, setMinutes] = useState('90');
  const custom = new Date(NOW.getTime() - Number(minutes || 0) * MINUTE);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Necha daqiqa oldin" description={`timeAgo → ${timeAgo(custom, NOW)}`}>
        <Input
          value={minutes}
          onChange={(e) => setMinutes(e.target.value.replace(/[^\d-]/g, ''))}
          inputMode="numeric"
          suffix="daqiqa"
        />
      </Field>
      <ul className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {OFFSETS.map((m) => (
          <li key={m} className="flex justify-between gap-4 px-3 py-2">
            <span className="font-mono text-xs text-text-muted">{m} daqiqa</span>
            <span className="text-text">{timeAgo(NOW.getTime() - m * MINUTE, NOW)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}