|
| 1 | +import { useMemo, useState } from 'react'; |
| 2 | +import { ArrowLeftRight, Download } from 'lucide-react'; |
| 3 | +import { TextArea } from '@/components/ui/TextArea'; |
| 4 | +import { Button } from '@/components/ui/Button'; |
| 5 | +import { CopyButton } from '@/components/ui/CopyButton'; |
| 6 | +import { downloadService } from '@/services/download.service'; |
| 7 | +import { compareLines, type LineSetMode, type LineSetOptions } from '@/tools/dev/lineset.lib'; |
| 8 | +import type { Lang } from '@/i18n/config'; |
| 9 | + |
| 10 | +const MODE_IDS: LineSetMode[] = ['union', 'difference', 'differenceB', 'intersection', 'symmetric', 'duplicates']; |
| 11 | + |
| 12 | +const TR: Record<Lang, { |
| 13 | + intro: string; listA: string; listB: string; placeholderA: string; placeholderB: string; |
| 14 | + swap: string; result: string; resultCount: (n: number) => string; lineCount: (n: number) => string; |
| 15 | + download: string; empty: string; optionsLabel: string; |
| 16 | + opts: Record<keyof LineSetOptions, string>; |
| 17 | + modes: Record<LineSetMode, { label: string; hint: string }>; |
| 18 | +}> = { |
| 19 | + en: { |
| 20 | + intro: 'Compare two lists of lines and combine them with set operations — merge and dedupe, subtract one from the other, find what they share, and more. Everything runs in your browser; nothing is uploaded.', |
| 21 | + listA: 'List A', listB: 'List B', |
| 22 | + placeholderA: 'Paste the first list, one item per line…', placeholderB: 'Paste the second list, one item per line…', |
| 23 | + swap: 'Swap A ↔ B', result: 'Result', resultCount: (n) => `${n.toLocaleString()} line${n === 1 ? '' : 's'}`, |
| 24 | + lineCount: (n) => `${n.toLocaleString()} line${n === 1 ? '' : 's'}`, download: 'Download .txt', |
| 25 | + empty: 'The result is empty.', optionsLabel: 'Options', |
| 26 | + opts: { caseInsensitive: 'Ignore case', trim: 'Trim whitespace', ignoreBlank: 'Ignore blank lines', sort: 'Sort result' }, |
| 27 | + modes: { |
| 28 | + union: { label: 'Merge & dedupe', hint: 'All unique lines from both lists (A ∪ B)' }, |
| 29 | + difference: { label: 'In A, not in B', hint: 'Remove B’s lines from A (A − B)' }, |
| 30 | + differenceB: { label: 'In B, not in A', hint: 'Remove A’s lines from B (B − A)' }, |
| 31 | + intersection: { label: 'Common to both', hint: 'Lines that appear in both lists (A ∩ B)' }, |
| 32 | + symmetric: { label: 'In only one', hint: 'Lines in just one of the lists (A △ B)' }, |
| 33 | + duplicates: { label: 'Duplicates', hint: 'Lines that appear 2+ times across both lists' }, |
| 34 | + }, |
| 35 | + }, |
| 36 | + id: { |
| 37 | + intro: 'Bandingkan dua daftar baris dan gabungkan dengan operasi himpunan — gabung dan hapus duplikat, kurangi satu dari yang lain, temukan yang sama, dan lainnya. Semuanya berjalan di browser Anda; tidak ada yang diunggah.', |
| 38 | + listA: 'Daftar A', listB: 'Daftar B', |
| 39 | + placeholderA: 'Tempel daftar pertama, satu item per baris…', placeholderB: 'Tempel daftar kedua, satu item per baris…', |
| 40 | + swap: 'Tukar A ↔ B', result: 'Hasil', resultCount: (n) => `${n.toLocaleString()} baris`, |
| 41 | + lineCount: (n) => `${n.toLocaleString()} baris`, download: 'Unduh .txt', |
| 42 | + empty: 'Hasilnya kosong.', optionsLabel: 'Opsi', |
| 43 | + opts: { caseInsensitive: 'Abaikan huruf besar/kecil', trim: 'Pangkas spasi', ignoreBlank: 'Abaikan baris kosong', sort: 'Urutkan hasil' }, |
| 44 | + modes: { |
| 45 | + union: { label: 'Gabung & hapus duplikat', hint: 'Semua baris unik dari kedua daftar (A ∪ B)' }, |
| 46 | + difference: { label: 'Di A, tidak di B', hint: 'Hapus baris B dari A (A − B)' }, |
| 47 | + differenceB: { label: 'Di B, tidak di A', hint: 'Hapus baris A dari B (B − A)' }, |
| 48 | + intersection: { label: 'Sama di keduanya', hint: 'Baris yang muncul di kedua daftar (A ∩ B)' }, |
| 49 | + symmetric: { label: 'Hanya di salah satu', hint: 'Baris yang hanya ada di salah satu daftar (A △ B)' }, |
| 50 | + duplicates: { label: 'Duplikat', hint: 'Baris yang muncul 2+ kali di kedua daftar' }, |
| 51 | + }, |
| 52 | + }, |
| 53 | +}; |
| 54 | + |
| 55 | +const nonEmptyLines = (s: string) => (s.length ? s.split(/\r\n|\r|\n/).filter((l) => l.trim() !== '').length : 0); |
| 56 | + |
| 57 | +export default function CompareLists({ lang = 'en' }: { lang?: Lang }) { |
| 58 | + const t = TR[lang] ?? TR.en; |
| 59 | + const [a, setA] = useState(''); |
| 60 | + const [b, setB] = useState(''); |
| 61 | + const [mode, setMode] = useState<LineSetMode>('union'); |
| 62 | + const [opts, setOpts] = useState<LineSetOptions>({ trim: true }); |
| 63 | + |
| 64 | + const result = useMemo(() => compareLines(a, b, mode, opts), [a, b, mode, opts]); |
| 65 | + const resultText = useMemo(() => result.lines.join('\n'), [result]); |
| 66 | + |
| 67 | + const toggle = (k: keyof LineSetOptions) => setOpts((o) => ({ ...o, [k]: !o[k] })); |
| 68 | + const swap = () => { setA(b); setB(a); }; |
| 69 | + const download = () => downloadService.download(new Blob([resultText], { type: 'text/plain' }), 'compare-result.txt'); |
| 70 | + |
| 71 | + return ( |
| 72 | + <div className="space-y-4"> |
| 73 | + <p className="text-sm text-muted-foreground">{t.intro}</p> |
| 74 | + |
| 75 | + <div className="grid gap-3 sm:grid-cols-2"> |
| 76 | + <div className="space-y-1"> |
| 77 | + <TextArea label={`${t.listA} · ${t.lineCount(nonEmptyLines(a))}`} value={a} onChange={(e) => setA(e.target.value)} placeholder={t.placeholderA} rows={10} spellCheck={false} /> |
| 78 | + </div> |
| 79 | + <div className="space-y-1"> |
| 80 | + <TextArea label={`${t.listB} · ${t.lineCount(nonEmptyLines(b))}`} value={b} onChange={(e) => setB(e.target.value)} placeholder={t.placeholderB} rows={10} spellCheck={false} /> |
| 81 | + </div> |
| 82 | + </div> |
| 83 | + |
| 84 | + <div className="flex flex-wrap items-center gap-2"> |
| 85 | + <Button variant="ghost" onClick={swap}><ArrowLeftRight className="h-4 w-4" /> {t.swap}</Button> |
| 86 | + </div> |
| 87 | + |
| 88 | + <div className="space-y-2"> |
| 89 | + <div className="flex flex-wrap gap-2"> |
| 90 | + {MODE_IDS.map((id) => ( |
| 91 | + <button |
| 92 | + key={id} |
| 93 | + onClick={() => setMode(id)} |
| 94 | + title={t.modes[id].hint} |
| 95 | + aria-pressed={mode === id} |
| 96 | + className={`border-2 px-3 py-1.5 text-sm font-medium transition-all ${mode === id ? 'border-border bg-accent text-accent-foreground shadow-brutal' : 'border-border hover:shadow-brutal'}`} |
| 97 | + > |
| 98 | + {t.modes[id].label} |
| 99 | + </button> |
| 100 | + ))} |
| 101 | + </div> |
| 102 | + <p className="text-xs text-muted-foreground">{t.modes[mode].hint}</p> |
| 103 | + </div> |
| 104 | + |
| 105 | + <fieldset className="flex flex-wrap gap-x-5 gap-y-2"> |
| 106 | + <legend className="mb-1 text-sm font-semibold">{t.optionsLabel}</legend> |
| 107 | + {(Object.keys(t.opts) as (keyof LineSetOptions)[]).map((k) => ( |
| 108 | + <label key={k} className="flex cursor-pointer items-center gap-2 text-sm"> |
| 109 | + <input type="checkbox" checked={!!opts[k]} onChange={() => toggle(k)} className="h-4 w-4 accent-accent" /> |
| 110 | + {t.opts[k]} |
| 111 | + </label> |
| 112 | + ))} |
| 113 | + </fieldset> |
| 114 | + |
| 115 | + <div className="space-y-2"> |
| 116 | + <div className="flex flex-wrap items-center gap-2"> |
| 117 | + <span className="mr-auto text-sm font-semibold">{t.result} · {t.resultCount(result.count)}</span> |
| 118 | + <CopyButton value={resultText} /> |
| 119 | + <Button variant="secondary" onClick={download} disabled={result.count === 0}><Download className="h-4 w-4" /> {t.download}</Button> |
| 120 | + </div> |
| 121 | + <TextArea value={resultText} readOnly rows={10} spellCheck={false} placeholder={t.empty} /> |
| 122 | + </div> |
| 123 | + </div> |
| 124 | + ); |
| 125 | +} |
0 commit comments