more
This commit is contained in:
parent
ab12c18a1f
commit
c3b879c9f6
|
@ -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">
|
||||
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>
|
||||
</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>
|
||||
}
|
||||
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in New Issue