Matn

'use client';

import { cyrToLat, latToCyr, normalizeUz } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const SAMPLES = ['Ғузор тумани', "O'zbekiston", 'Gʻuzor', 'ер, поезд, маъно', 'SHAHAR'];

export default function CoreTranslit() {
  const [text, setText] = useState('Ғузор тумани');

  const rows = [
    { name: 'cyrToLat', value: cyrToLat(text) },
    { name: 'latToCyr', value: latToCyr(text) },
    { name: 'normalizeUz', value: normalizeUz(text) },
  ];

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Matn">
        <Input value={text} onChange={(e) => setText(e.target.value)} />
      </Field>
      <div className="flex flex-wrap gap-2">
        {SAMPLES.map((s) => (
          <button key={s} type="button" onClick={() => setText(s)} className="cursor-pointer">
            <Badge variant="outline">{s}</Badge>
          </button>
        ))}
      </div>
      <dl className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {rows.map((row) => (
          <div key={row.name} className="flex items-center justify-between gap-4 px-3 py-2">
            <dt className="font-mono text-xs text-text-muted">{row.name}</dt>
            <dd className="font-mono break-all text-text">{row.value || '—'}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

'use client';

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

const CITIES = [
  'Toshkent',
  'Samarqand',
  'Buxoro',
  "Farg'ona",
  'Qo‘qon',
  'Shahrisabz',
  'Chirchiq',
  'Ғузор',
  'Ўрта Чирчиқ',
  'Шаҳрихон',
];

export default function CoreSearch() {
  const [query, setQuery] = useState('шаҳ');
  const results = CITIES.map((city) => ({ city, ...searchMatch(city, query) })).filter(
    (r) => r.match,
  );

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Field label="Shahar qidirish" description="Sinab ko'ring: chir, ғуз, fargona, qo'qon">
        <Input value={query} onChange={(e) => setQuery(e.target.value)} clearable />
      </Field>
      <ul className="flex flex-wrap gap-2">
        {results.map(({ city, ranges }) => (
          <li key={city} className="rounded-lg border border-border bg-surface px-3 py-1.5 text-sm">
            {splitByRanges(city, ranges).map((part, i) =>
              part.match ? (
                <mark key={i} className="rounded-sm bg-primary-soft text-primary-soft-foreground">
                  {part.text}
                </mark>
              ) : (
                <span key={i}>{part.text}</span>
              ),
            )}
          </li>
        ))}
        {results.length === 0 && <li className="text-sm text-text-muted">Hech narsa topilmadi</li>}
      </ul>
    </div>
  );
}

'use client';

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

const COMMANDS = [
  'Yangi buyurtma',
  "Buyurtmalar ro'yxati",
  "Mijoz qo'shish",
  'Hisobotlar',
  'Sozlamalar',
  'Profilni tahrirlash',
  'Mavzuni almashtirish',
];

export default function CoreFuzzy() {
  const [query, setQuery] = useState('ybu');
  const results = COMMANDS.flatMap((label) => {
    const result = fuzzyMatch(label, query);
    return result ? [{ label, ...result }] : [];
  }).sort((a, b) => b.score - a.score);

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Field label="Buyruq" description="Harflar tartibi muhim: mq, hsb, prof">
        <Input value={query} onChange={(e) => setQuery(e.target.value)} clearable />
      </Field>
      <ul className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        {results.map(({ label, ranges, score }) => (
          <li key={label} className="flex items-center justify-between gap-3 px-3 py-2">
            <span>
              {splitByRanges(label, ranges).map((part, i) =>
                part.match ? (
                  <strong key={i} className="font-semibold text-primary-soft-foreground">
                    {part.text}
                  </strong>
                ) : (
                  <span key={i}>{part.text}</span>
                ),
              )}
            </span>
            <span className="font-mono text-xs text-text-muted">{score}</span>
          </li>
        ))}
        {results.length === 0 && <li className="px-3 py-2 text-text-muted">Mos buyruq yo'q</li>}
      </ul>
    </div>
  );
}

'use client';

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

const FILE = 'shartnoma-mchj-akhatmirzo-imzolangan.docx';

export default function CoreTruncate() {
  const [title, setTitle] = useState("Farg'ona viloyati — 2026");
  const [max, setMax] = useState(24);

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Field label="Sarlavha" description={`slugify: ${slugify(title) || '—'}`}>
        <Input value={title} onChange={(e) => setTitle(e.target.value)} />
      </Field>
      <label className="flex flex-col gap-2 text-sm font-medium text-text">
        Maksimal uzunlik: {max}
        <input
          type="range"
          min={6}
          max={44}
          value={max}
          onChange={(e) => setMax(Number(e.target.value))}
          className="w-full accent-primary"
        />
      </label>
      <dl className="divide-y divide-border rounded-xl border border-border bg-surface text-sm">
        <div className="flex flex-col gap-1 px-3 py-2">
          <dt className="font-mono text-xs text-text-muted">truncateMiddle</dt>
          <dd className="font-mono text-text">{truncateMiddle(FILE, max)}</dd>
        </div>
        <div className="flex flex-col gap-1 px-3 py-2">
          <dt className="font-mono text-xs text-text-muted">truncate</dt>
          <dd className="font-mono text-text">{truncate(FILE, max)}</dd>
        </div>
      </dl>
    </div>
  );
}