This commit is contained in:
lingdocs 2022-05-14 21:30:15 -05:00
parent ab12c18a1f
commit c3b879c9f6
2 changed files with 23 additions and 21 deletions

View File

@ -9,11 +9,13 @@ function PhraseDiagram({ opts, children }: {
opts: T.TextOptions,
children: BlockInput[]
}) {
return <div className="d-flex flex-row justify-content-center flex-wrap">
{children.map((block) => (
<Block key={Math.random()} opts={opts}>{block}</Block>
))}
</div>;
return <div style={{ overflowX: "auto" }}>
<div className="d-flex flex-row justify-content-center flex-wrap">
{children.map((block) => (
<Block key={Math.random()} opts={opts}>{block}</Block>
))}
</div>
</div>
}
function Block({ opts, children }: {
@ -45,7 +47,7 @@ function NP({ opts, children, inside }: {
<Adjectives opts={opts}>{np.adjectives}</Adjectives>
<div> {np.ps[0].f}</div>
</div>
<div>NP</div>
<div className={inside ? "small" : ""}>NP</div>
</div>
}

View File

@ -21,32 +21,32 @@ Pashto phrases are built with a basic **building blocks** 🧱 like NPs, APs, ve
<div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>AP</div>
</div>
<div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>NP</div>
</div>
<div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>NP</div>
</div>
<div className="text-center">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>Verb</div>
</div>
@ -58,24 +58,24 @@ Or like this...
<div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>NP</div>
</div>
<div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>NP</div>
</div>
<div className="text-center">
<div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black",
height: "3rem",
width: "7rem",
height: "2.5rem",
width: "4rem",
}}/>
<div>Equative</div>
</div>
@ -265,6 +265,6 @@ coming soon
coming soon
Now try to make your own from scratch!
Now try to make your own NPs from scratch!
<NPPlayground opts={opts} />