fix spelling demo
This commit is contained in:
adueck
parent
56ef875814
commit
16757d1e49
|
|
@ -2,162 +2,167 @@ import Examples from "../components/src/Examples";
|
||||||
import * as T from "../types";
|
import * as T from "../types";
|
||||||
|
|
||||||
const spellingOptions: {
|
const spellingOptions: {
|
||||||
value: T.TextOptions["spelling"],
|
value: T.TextOptions["spelling"];
|
||||||
label: string,
|
label: string;
|
||||||
}[] = [
|
}[] = [
|
||||||
{
|
{
|
||||||
value: "Afghan",
|
value: "Afghan",
|
||||||
label: "Afghan",
|
label: "Afghan",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "Pakistani ي",
|
value: "Pakistani ي",
|
||||||
label: "Pakistani ي",
|
label: "Pakistani ي",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "Pakistani ی",
|
value: "Pakistani ی",
|
||||||
label: "Pakistani ی",
|
label: "Pakistani ی",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const phoneticsOptions: {
|
const phoneticsOptions: {
|
||||||
value: T.TextOptions["phonetics"],
|
value: T.TextOptions["phonetics"];
|
||||||
label: string,
|
label: string;
|
||||||
}[] = [
|
}[] = [
|
||||||
{
|
{
|
||||||
value: "lingdocs",
|
value: "lingdocs",
|
||||||
label: "LingDocs",
|
label: "LingDocs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "ipa",
|
value: "ipa",
|
||||||
label: "IPA",
|
label: "IPA",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: "alalc",
|
value: "alalc",
|
||||||
label: "ALALC",
|
label: "ALALC",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
function SpellingDemo({ opts, onChange }: {
|
function SpellingDemo({
|
||||||
opts: T.TextOptions,
|
opts,
|
||||||
onChange: (opts: T.TextOptions) => void,
|
onChange,
|
||||||
|
}: {
|
||||||
|
opts: T.TextOptions;
|
||||||
|
onChange: (opts: T.TextOptions) => void;
|
||||||
}) {
|
}) {
|
||||||
return <div className="mt-3" style={{ marginBottom: "100px" }}>
|
return (
|
||||||
<ul>
|
<div className="mt-3" style={{ marginBottom: "100px" }}>
|
||||||
<li>Converts text between Afghan and Pakistani spelling conventions</li>
|
<ul>
|
||||||
<li>Generates diacritics for Pashto script when given phonetic script along with Pashto script</li>
|
<li>Converts text between Afghan and Pakistani spelling conventions</li>
|
||||||
</ul>
|
<li>
|
||||||
<div className="d-block mx-auto card mb-3" style={{ maxWidth: "500px", background: "var(--closer)"}}>
|
Generates diacritics for Pashto script when given phonetic script
|
||||||
<div className="card-body">
|
along with Pashto script
|
||||||
<div className="row">
|
</li>
|
||||||
<div className="col-sm-6 mb-2">
|
</ul>
|
||||||
<h6>Pashto Spelling Convention:</h6>
|
<div
|
||||||
<div>
|
className="d-block mx-auto card mb-3"
|
||||||
{spellingOptions.map(({ value, label }) => (
|
style={{ maxWidth: "500px", background: "var(--closer)" }}
|
||||||
<div key={value} className="form-check">
|
>
|
||||||
<input
|
<div className="card-body">
|
||||||
className="form-check-input"
|
<div className="row">
|
||||||
type="radio"
|
<div className="col-sm-6 mb-2">
|
||||||
name="spelling-type"
|
<h6>Pashto Spelling Convention:</h6>
|
||||||
checked={opts.spelling === value}
|
<div>
|
||||||
value={value}
|
{spellingOptions.map(({ value, label }) => (
|
||||||
onChange={() => {
|
<div key={value} className="form-check">
|
||||||
onChange({
|
<input
|
||||||
...opts,
|
className="form-check-input"
|
||||||
spelling: value,
|
type="radio"
|
||||||
});
|
name="spelling-type"
|
||||||
}}
|
checked={opts.spelling === value}
|
||||||
/>
|
value={value}
|
||||||
<label className="form-check-label">
|
onChange={() => {
|
||||||
{label}
|
onChange({
|
||||||
</label>
|
...opts,
|
||||||
</div>
|
spelling: value,
|
||||||
))}
|
});
|
||||||
</div>
|
}}
|
||||||
</div>
|
/>
|
||||||
<div className="col-sm-6 mb-2">
|
<label className="form-check-label">{label}</label>
|
||||||
<h6>Latin Phonetic System:</h6>
|
</div>
|
||||||
<div>
|
))}
|
||||||
{phoneticsOptions.map(({ value, label }) => (
|
</div>
|
||||||
<div key={value} className="form-check">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="radio"
|
|
||||||
name="phonetics-type"
|
|
||||||
checked={opts.phonetics === value}
|
|
||||||
value={value}
|
|
||||||
onChange={() => {
|
|
||||||
onChange({
|
|
||||||
...opts,
|
|
||||||
phonetics: value,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label">
|
|
||||||
{label}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-6 mb-2">
|
|
||||||
<h6>Diacritics Engine:</h6>
|
|
||||||
<div>
|
|
||||||
<div className="form-check">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="radio"
|
|
||||||
name="diacritics-engine"
|
|
||||||
checked={opts.diacritics}
|
|
||||||
onChange={() => {
|
|
||||||
onChange({
|
|
||||||
...opts,
|
|
||||||
diacritics: true,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label">
|
|
||||||
On
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="form-check">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="radio"
|
|
||||||
name="diacritics-engine"
|
|
||||||
checked={!opts.diacritics}
|
|
||||||
onChange={() => {
|
|
||||||
onChange({
|
|
||||||
...opts,
|
|
||||||
diacritics: false,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label className="form-check-label">
|
|
||||||
Off
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-sm-6 mb-2">
|
||||||
|
<h6>Latin Phonetic System:</h6>
|
||||||
|
<div>
|
||||||
|
{phoneticsOptions.map(({ value, label }) => (
|
||||||
|
<div key={value} className="form-check">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
name="phonetics-type"
|
||||||
|
checked={opts.phonetics === value}
|
||||||
|
value={value}
|
||||||
|
onChange={() => {
|
||||||
|
onChange({
|
||||||
|
...opts,
|
||||||
|
phonetics: value,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">{label}</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6 mb-2">
|
||||||
|
<h6>Diacritics Engine:</h6>
|
||||||
|
<div>
|
||||||
|
<div className="form-check">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
name="diacritics-engine"
|
||||||
|
checked={opts.diacritics}
|
||||||
|
onChange={() => {
|
||||||
|
onChange({
|
||||||
|
...opts,
|
||||||
|
diacritics: true,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">On</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-check">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
name="diacritics-engine"
|
||||||
|
checked={!opts.diacritics}
|
||||||
|
onChange={() => {
|
||||||
|
onChange({
|
||||||
|
...opts,
|
||||||
|
diacritics: false,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">Off</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 text-center">
|
</div>
|
||||||
<Examples opts={opts}>{[
|
<div className="mt-4 text-center">
|
||||||
{
|
<Examples opts={opts}>
|
||||||
p: "زما زوی مکتب ته ځي",
|
{[
|
||||||
f: "zmaa zooy maktab ta dzee",
|
{
|
||||||
},
|
p: "زما زوی مکتب ته ځي",
|
||||||
{
|
f: "zmaa zooy maktab ta dzee",
|
||||||
p: "دا ښه سړی دی",
|
},
|
||||||
f: "daa xu saRey dey",
|
{
|
||||||
},
|
p: "دا ښه سړی دی",
|
||||||
{
|
f: "daa xu saRey day",
|
||||||
p: "په دکان کې مې ډېر خلک لیدلي دي",
|
},
|
||||||
f: "pu dUkaan ke me Der khalk leedulee dee",
|
{
|
||||||
},
|
p: "په دکان کې مې ډېر خلک لیدلي دي",
|
||||||
]}</Examples>
|
f: "pu dUkaan ke me Der khalk leedulee dee",
|
||||||
</div>
|
},
|
||||||
</div>;
|
]}
|
||||||
|
</Examples>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SpellingDemo;
|
export default SpellingDemo;
|
||||||
Loading…
Reference in New Issue