From 254cc2b661f86a062569eafa06ae4fc7338d5c3b Mon Sep 17 00:00:00 2001 From: Uzair Akbar Date: Tue, 24 Mar 2026 11:38:04 -0400 Subject: [PATCH 1/4] Add code lookup page --- src/pages/code-lookup/CodeLookupPage.css | 73 ++++++++++++++++ src/pages/code-lookup/CodeLookupPage.tsx | 21 +++++ src/pages/code-lookup/CodeLookupPageBody.tsx | 89 ++++++++++++++++++++ 3 files changed, 183 insertions(+) create mode 100644 src/pages/code-lookup/CodeLookupPage.css create mode 100644 src/pages/code-lookup/CodeLookupPage.tsx create mode 100644 src/pages/code-lookup/CodeLookupPageBody.tsx diff --git a/src/pages/code-lookup/CodeLookupPage.css b/src/pages/code-lookup/CodeLookupPage.css new file mode 100644 index 000000000..41083e840 --- /dev/null +++ b/src/pages/code-lookup/CodeLookupPage.css @@ -0,0 +1,73 @@ +.code-lookup-container { + max-width: 900px; + margin: 0 auto; + padding: 2em 1.5em; +} + +.code-lookup-container h2 { + margin-top: 0; +} + +.code-lookup-textareas { + display: flex; + gap: 1em; + margin-top: 1em; +} + +@media (max-width: 640px) { + .code-lookup-textareas { + flex-direction: column; + } +} + +.code-lookup-column { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.5em; +} + +.code-lookup-column label { + font-weight: 600; +} + +.code-lookup-textarea { + width: 100%; + min-height: 220px; + font-family: 'Courier New', Courier, monospace; + font-size: 0.95em; + line-height: 1.6; + padding: 0.75em; + border: 1px solid var(--color-text-secondary); + border-radius: 6px; + background-color: var(--color-background); + color: var(--color-text); + resize: vertical; + box-sizing: border-box; +} + +.code-lookup-textarea:focus { + outline: 2px solid var(--color-button-primary); + border-color: var(--color-button-primary); +} + +.code-lookup-textarea[readonly] { + background-color: color-mix(in srgb, var(--color-button-secondary), var(--color-background) 50%); +} + +.code-lookup-actions { + display: flex; + gap: 0.75em; + margin-top: 1em; + flex-wrap: wrap; +} + +.code-lookup-status { + margin-top: 1em; + font-size: 0.9em; + color: var(--color-text-secondary); +} + +.code-lookup-status .warning { + color: var(--color-text-orange); +} \ No newline at end of file diff --git a/src/pages/code-lookup/CodeLookupPage.tsx b/src/pages/code-lookup/CodeLookupPage.tsx new file mode 100644 index 000000000..251a4f766 --- /dev/null +++ b/src/pages/code-lookup/CodeLookupPage.tsx @@ -0,0 +1,21 @@ +import React, { Suspense } from 'react'; + +import Loading from '@widgets/Loading'; + +const PageParamsProvider = React.lazy(() => import('@features/params/PageParamsProvider')); +const DataProvider = React.lazy(() => import('@features/data/context/DataProvider')); +const CodeLookupPageBody = React.lazy(() => import('./CodeLookupPageBody')); + +const CodeLookupPage: React.FC = () => { + return ( + }> + + + + + + + ); +}; + +export default CodeLookupPage; diff --git a/src/pages/code-lookup/CodeLookupPageBody.tsx b/src/pages/code-lookup/CodeLookupPageBody.tsx new file mode 100644 index 000000000..a71e04375 --- /dev/null +++ b/src/pages/code-lookup/CodeLookupPageBody.tsx @@ -0,0 +1,89 @@ +import { useDataContext } from '@features/data/context/useDataContext'; +import React, { useState } from 'react'; +import './CodeLookupPage.css'; +import { batchLookup, BatchMatchResult } from './batchMatchLogic'; + +const CodeLookupPageBody: React.FC = () => { + const { languagesInSelectedSource } = useDataContext(); + const [inputText, setInputText] = useState(''); + const [outputText, setOutputText] = useState(''); + const [statusMessages, setStatusMessages] = useState([]); + const [copied, setCopied] = useState(false); + + const isLoading = languagesInSelectedSource.length === 0; + + function handleLookup() { + const lines = inputText.split('\n'); + const results: BatchMatchResult[] = batchLookup(lines, languagesInSelectedSource); + + const codes = results.map((r) => r.code); + setOutputText(codes.join('\n')); + + const warnings: string[] = []; + results.forEach((r, i) => { + if (r.warning) { + warnings.push(`Line ${i + 1}: ${r.warning}`); + } + }); + setStatusMessages(warnings); + setCopied(false); + } + + async function handleCopy() { + try { + await navigator.clipboard.writeText(outputText); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { } + } + + return ( +
+

Language Code Lookup

+

+ Enter language names below (one per line) and click Look Up to get their + language codes. Example: Punjabi >> lah/pan. +

+
+
+ +