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