pashto-inflector/src/demo-components/SpellingDemo.tsx

import Examples from "../components/src/Examples";
import * as T from "../types";

const spellingOptions: {
    value: T.TextOptions["spelling"],
    label: string,
}[] = [
    {
        value: "Afghan",
        label: "Afghan",
    },
    {
        value: "Pakistani ي",
        label: "Pakistani ي",
    },
    {
        value: "Pakistani ی",
        label: "Pakistani ی",
    },
];

const phoneticsOptions: {
    value: T.TextOptions["phonetics"],
    label: string,
}[] = [
    {
        value: "lingdocs",
        label: "LingDocs",
    },
    {
        value: "ipa",
        label: "IPA",
    },
    {
        value: "alalc",
        label: "ALALC",
    },
];

function SpellingDemo({ opts, onChange }: {
    opts: T.TextOptions,
    onChange: (opts: T.TextOptions) => void,
}) {
    return <div style={{ marginBottom: "100px" }}>
        <ul>
            <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>   
        </ul>
        <div className="d-block mx-auto card mb-3" style={{ maxWidth: "500px", background: "var(--closer)"}}>
            <div className="card-body">
                <div className="row">
                    <div className="col-sm-6 mb-2">
                        <h6>Pashto Spelling Convention:</h6>
                        <div>
                            {spellingOptions.map(({ value, label }) => (
                                <div key={value} className="form-check">
                                    <input 
                                        className="form-check-input" 
                                        type="radio"
                                        name="spelling-type"
                                        checked={opts.spelling === value}
                                        value={value}
                                        onChange={() => {
                                            onChange({
                                                ...opts,
                                                spelling: value,
                                            });
                                        }}
                                    />
                                    <label className="form-check-label">
                                        {label}
                                    </label>
                                </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">
            <Examples opts={opts}>{[
                {
                    p: "زما زوی مکتب ته ځي",
                    f: "zmaa zooy maktab ta dzee",
                },
                {
                    p: "دا ښه سړی دی",
                    f: "daa xu saRey dey",
                },
                {
                    p: "په دکان کې مې ډېر خلک لیدلي دي",
                    f: "pu dUkaan ke me Der khalk leedulee dee",
                },
            ]}</Examples>
        </div>
    </div>;
}

export default SpellingDemo;