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, opts: T.TextOptions,
children: BlockInput[] children: BlockInput[]
}) { }) {
return <div className="d-flex flex-row justify-content-center flex-wrap"> return <div style={{ overflowX: "auto" }}>
<div className="d-flex flex-row justify-content-center flex-wrap">
{children.map((block) => ( {children.map((block) => (
<Block key={Math.random()} opts={opts}>{block}</Block> <Block key={Math.random()} opts={opts}>{block}</Block>
))} ))}
</div>; </div>
</div>
} }
function Block({ opts, children }: { function Block({ opts, children }: {
@ -45,7 +47,7 @@ function NP({ opts, children, inside }: {
<Adjectives opts={opts}>{np.adjectives}</Adjectives> <Adjectives opts={opts}>{np.adjectives}</Adjectives>
<div> {np.ps[0].f}</div> <div> {np.ps[0].f}</div>
</div> </div>
<div>NP</div> <div className={inside ? "small" : ""}>NP</div>
</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="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>AP</div> <div>AP</div>
</div> </div>
<div className="text-center mr-2"> <div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>NP</div> <div>NP</div>
</div> </div>
<div className="text-center mr-2"> <div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>NP</div> <div>NP</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>Verb</div> <div>Verb</div>
</div> </div>
@ -58,24 +58,24 @@ Or like this...
<div className="text-center mr-2"> <div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>NP</div> <div>NP</div>
</div> </div>
<div className="text-center mr-2"> <div className="text-center mr-2">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>NP</div> <div>NP</div>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="d-flex justify-content-center align-items-center" style={{ <div className="d-flex justify-content-center align-items-center" style={{
border: "2px solid black", border: "2px solid black",
height: "3rem", height: "2.5rem",
width: "7rem", width: "4rem",
}}/> }}/>
<div>Equative</div> <div>Equative</div>
</div> </div>
@ -265,6 +265,6 @@ coming soon
coming soon coming soon
Now try to make your own from scratch! Now try to make your own NPs from scratch!
<NPPlayground opts={opts} /> <NPPlayground opts={opts} />