lingdocs
/
pashto-inflector
mirror of https://github.com/lingdocs/pashto-inflector.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix spelling demo

This commit is contained in:
adueck 2023-08-18 21:26:34 +04:00
parent 56ef875814
commit 16757d1e49
1 changed files with 152 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/demo-components/SpellingDemo.tsx
View File

@ -2,8 +2,8 @@ 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",
@ -20,8 +20,8 @@ const spellingOptions: {
]; ];
const phoneticsOptions: { const phoneticsOptions: {
value: T.TextOptions["phonetics"], value: T.TextOptions["phonetics"];
label: string, label: string;
}[] = [ }[] = [
{ {
value: "lingdocs", value: "lingdocs",
@ -37,16 +37,26 @@ const phoneticsOptions: {
}, },
]; ];
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 (
<div className="mt-3" style={{ marginBottom: "100px" }}>
<ul> <ul>
<li>Converts text between Afghan and Pakistani spelling conventions</li> <li>Converts text between Afghan and Pakistani spelling conventions</li>
<li>Generates diacritics for Pashto script when given phonetic script along with Pashto script</li> <li>
Generates diacritics for Pashto script when given phonetic script
along with Pashto script
</li>
</ul> </ul>
<div className="d-block mx-auto card mb-3" style={{ maxWidth: "500px", background: "var(--closer)"}}> <div
className="d-block mx-auto card mb-3"
style={{ maxWidth: "500px", background: "var(--closer)" }}
>
<div className="card-body"> <div className="card-body">
<div className="row"> <div className="row">
<div className="col-sm-6 mb-2"> <div className="col-sm-6 mb-2">
@ -67,9 +77,7 @@ function SpellingDemo({ opts, onChange }: {
}); });
}} }}
/> />
<label className="form-check-label"> <label className="form-check-label">{label}</label>
{label}
</label>
</div> </div>
))} ))}
</div> </div>
@ -92,9 +100,7 @@ function SpellingDemo({ opts, onChange }: {
}); });
}} }}
/> />
<label className="form-check-label"> <label className="form-check-label">{label}</label>
{label}
</label>
</div> </div>
))} ))}
</div> </div>
@ -115,9 +121,7 @@ function SpellingDemo({ opts, onChange }: {
}); });
}} }}
/> />
<label className="form-check-label"> <label className="form-check-label">On</label>
On
</label>
</div> </div>
<div className="form-check"> <div className="form-check">
<input <input
@ -132,9 +136,7 @@ function SpellingDemo({ opts, onChange }: {
}); });
}} }}
/> />
<label className="form-check-label"> <label className="form-check-label">Off</label>
Off
</label>
</div> </div>
</div> </div>
</div> </div>
@ -142,22 +144,25 @@ function SpellingDemo({ opts, onChange }: {
</div> </div>
</div> </div>
<div className="mt-4 text-center"> <div className="mt-4 text-center">
<Examples opts={opts}>{[ <Examples opts={opts}>
{[
{ {
p: "زما زوی مکتب ته ځي", p: "زما زوی مکتب ته ځي",
f: "zmaa zooy maktab ta dzee", f: "zmaa zooy maktab ta dzee",
}, },
{ {
p: "دا ښه سړی دی", p: "دا ښه سړی دی",
f: "daa xu saRey dey", f: "daa xu saRey day",
}, },
{ {
p: "په دکان کې مې ډېر خلک لیدلي دي", p: "په دکان کې مې ډېر خلک لیدلي دي",
f: "pu dUkaan ke me Der khalk leedulee dee", f: "pu dUkaan ke me Der khalk leedulee dee",
}, },
]}</Examples> ]}
</Examples>
</div> </div>
</div>; </div>
);
} }
export default SpellingDemo; export default SpellingDemo;